C1BarChart通过数据源生成条形图表

发布时间:2014/06/12 00:06 发布者:Alice

返回博客中心

C1BarChart 是 Wijmo 使用频率最高的控件之一。本文介绍以数据源为基础来定制条形图,Demo示例中的代码介绍怎么设置X轴和Y轴的文字,如何添加图表页眉,如何添加标签文字,以及如何用数据填充图表。
  

C1BarChart通过数据源生成条形图表步骤如下。

首先添加C1BartChart控件到web应用程序。

设置X轴和Y轴的文字

通过C1BarChart的Axis标签设置X、Y轴。Axis.X.Text和Axis.Y.Text分别设置X轴和Y轴的文字。代码如下。

<Axis>
    <X Text=""></X>
    <Y Text="硬件总量" Compass="West"></Y>
</Axis>

添加页眉

使用C1BarChart的Header标签添加页眉。页眉的文字用Header.Text设置。代码如下。

<Header Text="硬件分布"></Header>

添加标签文字

通过C1BarChart的ShowChartLabels显示默认的标签。ChartLabelFormatString设置标签的格式。ChartLabelStyle显示标签样式。

使用数据填充图表

通过C1BarChart的SeriesList创建BarChartSeries,并用<Values>标签对X轴、Y轴的值进行设置。代码如下。

<SeriesList>
            <wijmo:BarChartSeries Label="西部" LegendEntry="true">
                <Data>
                    <X>
                        <Values>
                            <wijmo:ChartXData StringValue="台式机" />
                            <wijmo:ChartXData StringValue="笔记本" />
                            <wijmo:ChartXData StringValue="一体机" />
                            <wijmo:ChartXData StringValue="平板电脑" />
                            <wijmo:ChartXData StringValue="电话" />
                        </Values>
                    </X>
                    <Y>
                        <Values>
                            <wijmo:ChartYData DoubleValue="5" />
                            <wijmo:ChartYData DoubleValue="3" />
                            <wijmo:ChartYData DoubleValue="4" />
                            <wijmo:ChartYData DoubleValue="7" />
                            <wijmo:ChartYData DoubleValue="2" />
                        </Values>
                    </Y>
                </Data>
            </wijmo:BarChartSeries>

</SeriesList>

载入页面,可以得到如下的效果图。

C1BarChart-overview

本文Demo的源代码如下:

C1BarChart-Overview.7z (3.85 mb)


关于葡萄城

赋能开发者!葡萄城是专业的集开发工具、商业智能解决方案、低代码开发平台于一身的软件和服务提供商,为超过 75% 的全球财富 500 强企业提供服务。葡萄城专注控件软件领域30年,希望通过模块化的开发控件、灵活的低代码应用开发平台等一系列开发工具、解决方案和服务,帮助开发者快速响应复杂多变的业务需求,最大程度地发挥开发者的才智和潜能,让开发者的 IT 人生更从容更美好。

了解详情,请访问葡萄城官网