彩票走势图

利用DevExpress的WebChartControl绘制图表的示例

原创|其它|编辑:郝浩|2012-10-11 15:21:16.000|阅读 2897 次

概述:WebChartControl是DevExpress控件群下的一个Web图表控件,它使用非常的方便,生成的图表也相当的漂亮。我们在本章就如何利用WebChartControl控件来绘制柱状图,线状图与饼状图做个示例。

# 慧都年终大促·界面/图表报表/文档/IDE等千款热门软控件火热促销中 >>

WebChartControl是DevExpress控件群下的一个Web图表控件,它使用非常的方便,生成的图表也相当的漂亮。我们在本章就如何利用WebChartControl控件来绘制柱状图,线状图与饼状图做个示例。

首先,我们需要在aspx页面放置一个WebChartControl控件,代码如下,为简单起见,我们不为它设置任何属性:

<dxchartsui:WebChartControl ID="WebChartControl1" runat="server" Height="200px" Width="500px" >
</dxchartsui:WebChartControl >

注意需要在aspx的头部注册该控件:  

<%@ Register Assembly="DevExpress.XtraCharts.v9.1.Web, Version=9.1.3.0, Culture=neutral, PublicKeyToken=b88d1754d700e49a" Namespace="DevExpress.XtraCharts.Web" TagPrefix="dxchartsui" % >
<%@ Register Assembly="DevExpress.XtraCharts.v9.1, Version=9.1.3.0, Culture=neutral, PublicKeyToken=b88d1754d700e49a" Namespace="DevExpress.XtraCharts" TagPrefix="cc1" % >

而且需要添加对应的dll的引用,这些都是引用一个第三方控件的必需工作,就不细说了。

在开始示例前,我们先为图形创建数据源,我们以DataTable数据源作为示例,该DataTable只包含两列,week列与money列,代码如下:

public DataTable GetDataSource
{
    get
    {
        DataTable dt = new DataTable();
        dt.Columns.Add("week", typeof(string));
        dt.Columns.Add("money", typeof(decimal));

        dt.Rows.Add("星期一", 1200);
        dt.Rows.Add("星期二", 1500);
        dt.Rows.Add("星期三", 1400);
        dt.Rows.Add("星期四", 1450);
        dt.Rows.Add("星期五", 1300);
        dt.Rows.Add("星期六", 1325);
        dt.Rows.Add("星期日", 1400);

        return dt;
    }
}

下面我们以GetDataSource为数据源,开始创建图形。

1、创建柱形图

protected void Page_Load(object sender, EventArgs e)
{
    Series series = new Series("金额", ViewType.Bar);
    DataTable dt = GetDataSource;
    for (int i = 0; i < dt.Rows.Count; i++)
    {
        SeriesPoint point = new SeriesPoint(dt.Rows[i]["week"].ToString(), Convert.ToDouble(dt.Rows[i]["money"].ToString()));
        series.Points.Add(point);
    }
    this.WebChartControl1.Series.Add(series);
}

从上面的图表中可以看到,上面只有"金额"一项数据,如果我们要再加一项"成本"数据来作对比,要如何实现呢?

首先改写数据源,让其包括"成本"这一项的数据:

public DataTable GetDataSource
{
    get
    {
        DataTable dt = new DataTable();
        dt.Columns.Add("week", typeof(string));
        dt.Columns.Add("money", typeof(decimal));
        dt.Columns.Add("cost", typeof(decimal));

        dt.Rows.Add("星期一", 1200, 800);
        dt.Rows.Add("星期二", 1500, 1000);
        dt.Rows.Add("星期三", 1400, 850);
        dt.Rows.Add("星期四", 1450, 950);
        dt.Rows.Add("星期五", 1300, 900);
        dt.Rows.Add("星期六", 1325, 870);
        dt.Rows.Add("星期日", 1400, 890);

        return dt;
    }
}
	

再改写创建图形的代码:

protected void Page_Load(object sender, EventArgs e)
{
    Series series = new Series("金额", ViewType.Bar);
    Series series_cost = new Series("成本", ViewType.Bar);
    SeriesPoint point;
    DataTable dt = GetDataSource;
    for (int i = 0; i < dt.Rows.Count; i++)
    {
        point = new SeriesPoint(dt.Rows[i]["week"].ToString(), Convert.ToDouble(dt.Rows[i]["money"].ToString()));
        series.Points.Add(point);

        point = new SeriesPoint(dt.Rows[i]["week"].ToString(), Convert.ToDouble(dt.Rows[i]["cost"].ToString()));
        series_cost.Points.Add(point);
    }
    this.WebChartControl1.Series.Add(series);
    this.WebChartControl1.Series.Add(series_cost);
}

从上面的代码和结果可以看出来,一个Series对象,就代表图形中的一项数据,一个SeriesPoint对象,就代表项数据中的一个数据点,有了这两项理解,我们要再增加数据项,就非常简单了。

2、创建线状图

知道了怎么创建柱形图,再来创建线状图就很简单了,只需改写图形的类型就可以了。

protected void Page_Load(object sender, EventArgs e)
{
    Series series = new Series("金额", ViewType.Line);
    Series series_cost = new Series("成本", ViewType.Line);
    SeriesPoint point;
    DataTable dt = GetDataSource;
    for (int i = 0; i < dt.Rows.Count; i++)
    {
        point = new SeriesPoint(dt.Rows[i]["week"].ToString(), Convert.ToDouble(dt.Rows[i]["money"].ToString()));
        series.Points.Add(point);

        point = new SeriesPoint(dt.Rows[i]["week"].ToString(), Convert.ToDouble(dt.Rows[i]["cost"].ToString()));
        series_cost.Points.Add(point);
    }
    this.WebChartControl1.Series.Add(series);
    this.WebChartControl1.Series.Add(series_cost);
}

3、创建饼状图

和创建线状图一样,只需更改代码

Series series = new Series("金额", ViewType.Line);
Series series_cost = new Series("成本", ViewType.Line);

中的类型即可,修改后的代码如下:

Series series = new Series("金额", ViewType.Pie);
Series series_cost = new Series("成本", ViewType.Pie);

4、创建混合图

现在我们将金额的数据以线状显示,将成本的数据以柱状显示,改写Series对象的类型如下:

Series series = new Series("金额", ViewType.Line);
Series series_cost = new Series("成本", ViewType.Bar);

利用WebChartControl创建图形很简单吧,只需要简单的几行代码,就可以生成一个漂亮的图形了。



标签:

本站文章除注明转载外,均为本站原创或翻译。欢迎任何形式的转载,但请务必注明出处、不得修改原文相关链接,如果存在内容上的异议请邮件反馈至chenjj@pclwef.cn

文章转载自:.net学习网

为你推荐

  • 推荐视频
  • 推荐活动
  • 推荐产品
  • 推荐文章
  • 慧都慧问
相关产品
DevExpress Universal Subscription

行业领先的界面控件开发包,帮助企业构建卓越应用!

DevExpress WPF Subscription

高效MVVM开发模式,WPF界面解决方案首选工具,帮助企业实现酷炫动效界面。

DevExpress Silverlight Controls

高性价比高实用性的Silverlight用户界面控件套包,拥有大量的示例和帮助文档,开发者能够快速上手!

DevExpress WinForms Subscription

为Windows Forms平台创建具有影响力的业务解决方案,高性价比WinForms界面控件套包。

DevExpress DXperience Subscription

高性价比的企业级.NET用户界面套包,助力企业创建卓越应用!

title
扫码咨询


添加微信 立即咨询

电话咨询

客服热线
023-68661681

TOP