使用DevExpress的WebChartControl控件绘制图表(柱状图、折线图、饼图)

公告

View Post

第一次写博，没什么经验，主要是把最近自己对Dev的一些研究贴出来大家共同探讨，有不足之处望大家帮忙斧正。

WebChartControl是DevExpress控件群下的一个Web图表控件，它使用非常的方便，生成的图表也相当的漂亮。

先贴出几张WebChartControl生成的图表：

Web页面代码WebChartControl.aspx：

View Code

 1 <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebChartControl.aspx.cs" Inherits="DevDemo.WebChartControl" %>
 2 
 3 <%@ Register Assembly="DevExpress.XtraCharts.v11.2.Web, Version=11.2.5.0, Culture=neutral, PublicKeyToken=b88d1754d700e49a"
 4     Namespace="DevExpress.XtraCharts.Web" TagPrefix="dxchartsui" %>
 5 
 6 <%@ Register assembly="DevExpress.XtraCharts.v11.2, Version=11.2.5.0, Culture=neutral, PublicKeyToken=b88d1754d700e49a" namespace="DevExpress.XtraCharts" tagprefix="cc1" %>
 7 
 8 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 9 
10 <html xmlns="http://www.w3.org/1999/xhtml">
11 <head runat="server">
12     <title></title>
13 </head>
14 <body>
15     <form id="form1" runat="server">
16     <div>
17         <dxchartsui:WebChartControl ID="WebChartControl1" runat="server" Width="500px" Height="350px">
18         </dxchartsui:WebChartControl>
19 
20         <dxchartsui:WebChartControl ID="WebChartControl3" runat="server" Width="500px" Height="350px">
21         </dxchartsui:WebChartControl>
22         <dxchartsui:WebChartControl ID="WebChartControl2" runat="server" Width="500px" Height="350px">
23         </dxchartsui:WebChartControl>
24         <dxchartsui:WebChartControl ID="WebChartControl4" runat="server" Width="500px" Height="350px">
25         </dxchartsui:WebChartControl>
26     </div> 
27     </form>
28 </body>
29 </html>

Web页面后台代码WebChartControl.aspx.cs

View Code

 1 using System;
 2 using System.Collections.Generic;
 3 using System.Linq;
 4 using System.Web;
 5 using System.Web.UI;
 6 using System.Web.UI.WebControls;
 7 using System.Data;
 8 using DevExpress.XtraCharts;
 9 using System.Drawing;
10 
11 namespace DevDemo
12 {
13     public partial class WebChartControl : System.Web.UI.Page
14     {
15         protected void Page_Load(object sender, EventArgs e)
16         {
17             this.DrawBar();
18             this.DrawLine();
19             this.DrawPie();
20             this.DrawBarAndLine();
21         }
22 
23         /// <summary>
24         /// 绘制柱状图
25         /// </summary>
26         private void DrawBar() 
27         {
28 
29             ChartServices.SetChartTitle(this.WebChartControl1, true, "2012年12月第1周收入情况", true, 2, StringAlignment.Center, ChartTitleDockStyle.Top, true, new Font("宋体", 12, FontStyle.Bold), Color.Red, 10);    //如不需显示图表标题可不用调用本段代码，下同
30             ChartServices.DrawChart(this.WebChartControl1, "收益", ViewType.Bar, ServiceData.GetWeekMoneyAndCost(), "week", "money");
31             ChartServices.DrawChart(this.WebChartControl1, "成本", ViewType.Bar, ServiceData.GetWeekMoneyAndCost(), "week", "cost");
32             ChartServices.SetAxisX(this.WebChartControl1, true, StringAlignment.Center, "星期", Color.Red, true, new Font("宋体", 12, FontStyle.Bold));   //如不需显示X轴标题，可不调用该行代码，下同
33             ChartServices.SetAxisY(this.WebChartControl1, true, StringAlignment.Center, "金额", Color.Red, true, new Font("宋体", 12, FontStyle.Bold));   //如不需显示Y轴标题，可不调用该行代码，下同
34         }
35 
36         /// <summary>
37         /// 绘制折线图
38         /// </summary>
39         private void DrawLine()
40         {
41             ChartServices.SetChartTitle(this.WebChartControl3,true,"2012年12月第1周收入情况", true, 2, StringAlignment.Center, ChartTitleDockStyle.Top, true, new Font("宋体", 12, FontStyle.Bold), Color.Red, 10);
42             ChartServices.DrawChart(this.WebChartControl3, "收益", ViewType.Line, ServiceData.GetWeekMoneyAndCost(), "week", "money");
43             ChartServices.DrawChart(this.WebChartControl3, "成本", ViewType.Line, ServiceData.GetWeekMoneyAndCost(), "week", "cost");
44             ChartServices.SetAxisX(this.WebChartControl3, true, StringAlignment.Center, "星期", Color.Red, true, new Font("宋体", 12, FontStyle.Bold));
45             ChartServices.SetAxisY(this.WebChartControl3, true, StringAlignment.Center, "金额", Color.Red, true, new Font("宋体", 12, FontStyle.Bold));
46         }
47 
48         /// <summary>
49         /// 柱状图和折线图在同一图表中
50         /// </summary>
51         private void DrawBarAndLine() 
52         {
53             ChartServices.SetChartTitle(this.WebChartControl2,true,"2012年12月第1周收入情况", true, 2, StringAlignment.Center, ChartTitleDockStyle.Top, true, new Font("宋体", 12, FontStyle.Bold), Color.Red, 10);
54             ChartServices.DrawChart(this.WebChartControl2, "收益", ViewType.Bar, ServiceData.GetWeekMoneyAndCost(), "week", "money");
55             ChartServices.DrawChart(this.WebChartControl2, "成本", ViewType.Bar, ServiceData.GetWeekMoneyAndCost(), "week", "cost");
56             ChartServices.SetAxisX(this.WebChartControl2, true, StringAlignment.Center, "星期", Color.Red, true, new Font("宋体", 12, FontStyle.Bold));
57             ChartServices.SetAxisY(this.WebChartControl2, true, StringAlignment.Center, "金额", Color.Red, true, new Font("宋体", 12, FontStyle.Bold));
58 
59             ChartServices.SetChartTitle(this.WebChartControl2,false,"2012年12月第1周收入情况", true, 2, StringAlignment.Center, ChartTitleDockStyle.Top, true, new Font("宋体", 12, FontStyle.Bold), Color.Red, 10);
60             ChartServices.DrawChart(this.WebChartControl2, "收益", ViewType.Line, ServiceData.GetWeekMoneyAndCost(), "week", "money");
61             ChartServices.DrawChart(this.WebChartControl2, "成本", ViewType.Line, ServiceData.GetWeekMoneyAndCost(), "week", "cost");
62             ChartServices.SetAxisX(this.WebChartControl2, true, StringAlignment.Center, "星期", Color.Red, true, new Font("宋体", 12, FontStyle.Bold));
63             ChartServices.SetAxisY(this.WebChartControl2, true, StringAlignment.Center, "金额", Color.Red, true, new Font("宋体", 12, FontStyle.Bold));
64         }
65 
66         /// <summary>
67         /// 绘制饼图
68         /// </summary>
69         private void DrawPie()
70         {
71             ChartServices.SetChartTitle(this.WebChartControl4,true,"2012年12月第1周收入情况", true, 2, StringAlignment.Center, ChartTitleDockStyle.Top,true,new Font("宋体", 12, FontStyle.Bold), Color.Red, 10);
72             ChartServices.DrawChart(this.WebChartControl4, ServiceData.GetWeekMoneyAndCost().Rows[0][0].ToString(), ViewType.Pie, ServiceData.GetWeekMoneyAndCost(), "week", "money");
73         }
74     }
75 }

数据提供类ServiceData.cs，主要作用为图表控件提供数据源

View Code

 1 using System;
 2 using System.Collections.Generic;
 3 using System.Linq;
 4 using System.Web;
 5 using System.Data;
 6 
 7 namespace DevDemo
 8 {
 9     public static class ServiceData
10     {
11         /// <summary>
12         /// 获取一周收入和支出数据
13         /// </summary>
14         /// <returns>Datatable数据集合(可从数据库读取以datatable形式返回，此处为演示方便直接构造)</returns>
15         public static DataTable GetWeekMoneyAndCost()
16         {
17             DataTable dt = new DataTable();
18             dt.Columns.Add("week", typeof(string));
19             dt.Columns.Add("money", typeof(decimal));
20             dt.Columns.Add("cost", typeof(decimal));
21    
22             dt.Rows.Add("星期一", 1200,400);
23             dt.Rows.Add("星期二", 1800,750);
24             dt.Rows.Add("星期三", 890,320);
25             dt.Rows.Add("星期四", 1080,290);
26             dt.Rows.Add("星期五", 2800,1020);
27             dt.Rows.Add("星期六", 3200,1260);
28             dt.Rows.Add("星期日", 4500,2320);
29             return dt; 
30         }
31     }
32 }

图表控件辅助类ChartServices.cs，控制生成图表

View Code

  1 using System;
  2 using System.Collections.Generic;
  3 using System.Linq;
  4 using System.Web;
  5 using System.Drawing;
  6 using DevExpress.XtraCharts;
  7 using System.Data;
  8 
  9 namespace DevDemo
 10 {
 11     public static class ChartServices
 12     {
 13         /// <summary>
 14         /// 绘制图形
 15         /// </summary>
 16         /// <param name="control">图表控件</param>
 17         /// <param name="seriesName">系列名</param>
 18         /// <param name="type">类型</param>
 19         /// <param name="dt">数据源</param>
 20         /// <param name="column1"></param>
 21         /// <param name="column2"></param>
 22         public static void DrawChart(DevExpress.XtraCharts.Web.WebChartControl control, string seriesName, ViewType type, DataTable dt, string column1, string column2)
 23         {
 24             Series series = new Series(seriesName, type);
 25             DataTable table = dt;
 26             SeriesPoint point=null;
 27             for (int i = 0; i < table.Rows.Count; i++)
 28             {
 29                 point= new SeriesPoint(table.Rows[i][column1].ToString(), Convert.ToDouble(table.Rows[i][column2].ToString()));
 30                 series.Points.Add(point);
 31             }
 32             control.Series.Add(series);
 33             //针对饼图的特殊处理
 34             if(type==ViewType.Pie)
 35             {
 36                 //设置显示方式(Argument:显示图例说明，ArgumentAndValues:显示图例内容和数据)
 37                 series.Label.PointOptions.PointView = PointView.ArgumentAndValues;
 38                 //设置数据显示形式(Percent:百分比,Currency:货币类型，数据前添加￥,Scientific:科学计数法)
 39                 series.Label.PointOptions.ValueNumericOptions.Format = NumericFormat.Percent;
 40                 //数据是否保留小数(0：不保留小数位，1保留一位小数，2保留两位小数)
 41                 series.Label.PointOptions.ValueNumericOptions.Precision = 0;
 42 
 43                 //数据以百分比显示时只能是Default和None
 44                 ((PieSeriesLabel)series.Label).ResolveOverlappingMode =ResolveOverlappingMode.Default;
 45             }
 46         }
 47 
 48         /// <summary>
 49         /// 设置图表标题
 50         /// </summary>
 51         /// <param name="control">图表控件</param>
 52         /// /// <param name="isVisible">标题是否可见</param>
 53         /// <param name="text">标题文本</param>
 54         /// <param name="isWordWrop">是否换行</param>
 55         /// <param name="maxLineCount">最大允许行数</param>
 56         /// <param name="alignment">对齐方式</param>
 57         /// <param name="dock">位置</param>
 58         /// <param name="isAntialiasing">是否允许设置外观</param>
 59         /// <param name="font">字体</param>
 60         /// <param name="textColor">文本颜色</param>
 61         /// <param name="indent">字体缩进值</param>
 62         public static void SetChartTitle(DevExpress.XtraCharts.Web.WebChartControl control,bool isVisible,String text, bool isWordWrop, int maxLineCount, StringAlignment alignment, ChartTitleDockStyle dock, bool isAntialiasing, Font font, Color textColor, int indent)
 63         {
 64             //设置标题
 65             ChartTitle title = new ChartTitle();
 66             title.Visible = isVisible;
 67             //显示文本 
 68             title.Text = text;
 69             //是否允许换行
 70             title.WordWrap = isWordWrop;
 71             //最大允许行数
 72             title.MaxLineCount = maxLineCount;
 73             //对齐方式
 74             title.Alignment = alignment;
 75             //位置
 76             title.Dock = dock;
 77             //是否允许设置外观
 78             title.Antialiasing = isAntialiasing;
 79             //字体
 80             title.Font = font;
 81             //字体颜色
 82             title.TextColor = textColor;
 83             //缩进值
 84             title.Indent = indent;
 85             control.Titles.Add(title);
 86         }
 87 
 88 
 89         /// <summary>
 90         /// 为X轴添加标题
 91         /// </summary>
 92         /// <param name="control">图形控件</param>
 93         /// <param name="isVisible">标题是否可见</param>
 94         /// <param name="aligment">对齐方式</param>
 95         /// <param name="text">标题显示文本</param>
 96         /// <param name="color">标题字体颜色</param>
 97         /// <param name="isAntialiasing">是否允许设置外观</param>
 98         /// <param name="font">字体</param>
 99         public static void SetAxisX(DevExpress.XtraCharts.Web.WebChartControl control, bool isVisible, StringAlignment aligment, string text, Color color, bool isAntialiasing, Font font)
100         {
101             XYDiagram xydiagram = (XYDiagram)control.Diagram;
102             xydiagram.AxisX.Title.Visible = isVisible;
103             xydiagram.AxisX.Title.Alignment = aligment;
104             xydiagram.AxisX.Title.Text = text;
105             xydiagram.AxisX.Title.TextColor = color;
106             xydiagram.AxisX.Title.Antialiasing = isAntialiasing;
107             xydiagram.AxisX.Title.Font = font;
108         }
109 
110         /// <summary>
111         /// 为X轴添加标题
112         /// </summary>
113         /// <param name="control">图形控件</param>
114         /// <param name="isVisible">标题是否可见</param>
115         /// <param name="aligment">对齐方式</param>
116         /// <param name="text">标题显示文本</param>
117         /// <param name="color">标题字体颜色</param>
118         /// <param name="isAntialiasing">是否允许设置外观</param>
119         /// <param name="font">字体</param>
120         public static void SetAxisY(DevExpress.XtraCharts.Web.WebChartControl control, bool isVisible, StringAlignment aligment, string text, Color color, bool isAntialiasing, Font font)
121         {
122             XYDiagram xydiagram = (XYDiagram)control.Diagram;
123             xydiagram.AxisY.Title.Visible = isVisible;
124             xydiagram.AxisY.Title.Alignment = aligment;
125             xydiagram.AxisY.Title.Text = text;
126             xydiagram.AxisY.Title.TextColor = color;
127             xydiagram.AxisY.Title.Antialiasing = isAntialiasing;
128             xydiagram.AxisY.Title.Font = font;
129         }
130     }
131 }

以上为本人的一点小小研究，如有不足之处，望不吝赐教！

posted on 2012-12-17 21:23 baobao179898 阅读(4633) 评论(8) 编辑收藏举报

刷新页面返回顶部