WebChartControl使用方法

简介

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

步骤/方法

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

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

  2. 注意需要在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;
    }
    }

  3. 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);
    }

    运行结果如下:

    怎样使用WebChartControl绘制图型
  4. 从上面的图表中可以看到,上面只有"金额"一项数据,如果我们要再加一项"成本"数据来作对比,要如何实现呢?
    首先改写数据源,让其包括"成本"这一项的数据:

    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对象,就代表项数据中的一个数据点,有了这两项理解,我们要再增加数据项,就非常简单了。

    怎样使用WebChartControl绘制图型
  5. 创建线状图
    知道了怎么创建柱形图,再来创建线状图就很简单了,只需改写图形的类型就可以了。

    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);
    }

    运行结果如下:

    怎样使用WebChartControl绘制图型
  6. 创建饼状图
    和创建线状图一样,只需更改代码

    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);

    运行结果如下:


    怎样使用WebChartControl绘制图型
  7. 创建混合图
    现在我们将金额的数据以线状显示,将成本的数据以柱状显示,改写Series对象的类型如下:

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

    运行结果如下:


    怎样使用WebChartControl绘制图型
  • 0
    点赞
  • 0
    评论
  • 0
    收藏
  • 打赏
    打赏
  • 扫一扫,分享海报

©️2022 CSDN 皮肤主题:大白 设计师:CSDN官方博客 返回首页

打赏作者

_天空之城

你的鼓励将是我创作的最大动力

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值