您的位置：首页 > 其它

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

2013-12-17 14:51 776 查看

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

Web页面代码WebChartControl.aspx：

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

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;1011 namespace DevDemo12 {13     public partial class WebChartControl : System.Web.UI.Page14     {15         protected void Page_Load(object sender, EventArgs e)16         {17             this.DrawBar();18             this.DrawLine();19             this.DrawPie();20             this.DrawBarAndLine();21         }2223         /// <summary>24         /// 绘制柱状图25         /// </summary>26         private void DrawBar()27         {2829             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         }3536         /// <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         }4748         /// <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));5859             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         }6566         /// <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，主要作用为图表控件提供数据源

 1 using System;2 using System.Collections.Generic;3 using System.Linq;4 using System.Web;5 using System.Data;67 namespace DevDemo8 {9     public static class ServiceData10     {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));2122             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，控制生成图表

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;89 namespace DevDemo10 {11     public static class ChartServices12     {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;4243                 //数据以百分比显示时只能是Default和None44                 ((PieSeriesLabel)series.Label).ResolveOverlappingMode =ResolveOverlappingMode.Default;45             }46         }4748         /// <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         }878889         /// <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         }109110         /// <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 }

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： xtraChart使用

相关文章推荐

新的分享

章节导航