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

最新推荐文章于 2019-06-15 17:23:08 发布
最新推荐文章于 2019-06-15 17:23:08 发布
阅读量5.1k 收藏
点赞数

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

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

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

 

Web页面代码WebChartControl.aspx：

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

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

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

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

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

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

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

以上为本人的一点小小研究，如有不足之处，望不吝赐教！详见http://www.cnblogs.com/huabao-wei/archive/2012/12/17/DevWebChartControl.html

hsg77
关注
Dev ChartControl 显示设置百分比
qq_36905714的博客
09-16 936
**Dev ChartControl 显示设置百分比** //Y轴设置成百分数显示 ((XYDiagram)Chart.Diagram).AxisY.Label.TextPattern = "{V:0%}"; //显示的值为百分数 for (int j = 0; j < Chart.Series.Count; j++) { Series march = Chart.Seri...
DevExpress(11.1.8) 报表(web)：dev控件 WebChartControl 图表(柱状图、饼状图、折线图)
温喉
11-16 1769
先上图： 代码： 先构建数据源：  public DataTable GetDataSource()         {       DataTable dt = new DataTable();             dt.Columns.Add("quarter", typeof(string));             dt.Columns.Add("money1"
dev控件chart使用，实现柱状图与曲线图联合展示
09-17
devexpress控件chart使用，实现柱状图与曲线图联合展示，源码分享，可直接运行。
DEVexpress chartControl 柱形图、饼形图、曲线图简单例子
06-16
DEVexpress chartControl 柱形图、饼形图、曲线图简单例子
dev chart使用
dhmwidg13313的博客
09-28 519
public class LineChartHelp { #region 折线图 /// <summary> /// 创建折线图 /// </summary> public void CreateChart(ChartControl chart, DataTable dt, int j, ...
dev柱状图图，多图例展示
09-17
devexpress控件chart柱状图，多图例展示，源码分享
柱状图
weixin_42585491的博客
06-15 509
柱状图 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ 开发工具与关键技术：Visual Studio 2015 作者：朱海恩 撰写时间：2019年6月10日 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~...
MFC —柱状图，饼图，折线图
12-08
本篇文章将详细探讨如何在MFC中利用图形控件来创建柱状图、饼图和折线图，以展示数据和成绩。 首先，我们需要理解MFC中的CChartCtrl类，它是用来绘制各种图表的基础类。CChartCtrl并不是MFC标准库的一部分，而是由...
DevExpress控件使用详细讲解.docx
03-28
- 支持多种图表类型，如折线图、柱状图、饼图等。 - 可定制颜色、标签、图例，以适应不同数据可视化需求。 #### 4.3 报表（ReportControl） - 提供设计工具，允许在设计时预览报表布局。 - 支持数据绑定、条件格式...
图表控件【柱状图,曲线图,饼状图】
05-25
在IT领域，图表控件是数据可视化不可或缺的一部分，它们能够帮助我们有效地呈现复杂的数据，让信息一目了然。柱状图、曲线图和饼状图是三种最常见的图表类型，各自有着独特的应用场景和优势。 首先，柱状图是一种...
jfreechart柱状图
01-04
这是一份源代码，下载导入就能使用，不用改任何东西；不过没有连接数据库，其实也很简单，不懂的话我博客有教程
柱状图源码
03-27
柱状图源码
DevExpress之ChartControl实现饼状图百分比演示实例
09-04
主要介绍了DevExpress之ChartControl实现饼状图百分比演示的方法,实例讲述了窗体与图形绘制函数的用法,需要的朋友可以参考下
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值