1,首先需要添加引用ChartExtents.dll和donetCHARTING.dll,资源百度大把。
2,配置图片生成类。
1 using System; 2 using System.Data; 3 using System.Collections; 4 using System.Collections.Generic; 5 using System.Configuration; 6 using System.Web; 7 using dotnetCHARTING; 8 9 namespace ting.Models.BLL 10 { 11 public class Charting 12 { 13 private string _phaysicalimagepath;//图片存放路径 14 private string _title; //图片标题 15 private string _xtitle;//图片x座标名称 16 private string _ytitle;//图片y座标名称 17 private string _seriesname;//图例名称 18 private int _picwidth;//图片宽度 19 private int _pichight;//图片高度 20 private SeriesType _type;//统计图类型(柱形,线形等) 21 private bool _use3d;//是否显示成3维图片 22 private SeriesCollection _dt;//统计图数据源 23 private string _filename;//统计图片的名称(不包括后缀名) 24 25 /**/ 26 /// <summary> 27 /// 图片存放路径 28 /// </summary> 29 public string PhaysicalImagePath 30 { 31 set { _phaysicalimagepath = value; } 32 get { return _phaysicalimagepath; } 33 } 34 /**/ 35 /// <summary> 36 /// 图片标题 37 /// </summary> 38 public string Title 39 { 40 set { _title = value; } 41 get { return _title; } 42 } 43 /**/ 44 /// <summary> 45 /// 图片x座标名称 46 /// </summary> 47 public string XTitle 48 { 49 set { _xtitle = value; } 50 get { return _xtitle; } 51 } 52 /**/ 53 /// <summary> 54 /// 图片y座标名称 55 /// </summary> 56 public string YTitle 57 { 58 set { _ytitle = value; } 59 get { return _ytitle; } 60 } 61 62 /**/ 63 /// <summary> 64 /// 图例名称 65 /// </summary> 66 public string SeriesName 67 { 68 set { _seriesname = value; } 69 get { return _seriesname; } 70 } 71 /**/ 72 /// <summary> 73 /// 图片宽度 74 /// </summary> 75 public int PicWidth 76 { 77 set { _picwidth = value; } 78 get { return _picwidth; } 79 } 80 /**/ 81 /// <summary> 82 /// 图片高度 83 /// </summary> 84 public int PicHight 85 { 86 set { _pichight = value; } 87 get { return _pichight; } 88 } 89 90 /// <summary> 91 /// 统计图类型(柱形,线形等) 92 /// </summary> 93 public SeriesType Type 94 { 95 set { _type = value; } 96 get { return _type; } 97 } 98 99 /// <summary> 100 /// 是否将输出的图片显示成三维 101 /// </summary> 102 public bool Use3D 103 { 104 set { _use3d = value; } 105 get { return _use3d; } 106 } 107 108 /// <summary> 109 /// 对比图形数据源 110 /// </summary> 111 public SeriesCollection DataSource 112 { 113 114 set { _dt = value; } 115 get { return _dt; } 116 } 117 118 /// <summary> 119 /// 生成统计图片的名称 120 /// </summary> 121 public string FileName 122 { 123 set { _filename = value; } 124 get { return _filename; } 125 } 126 127 128 /// <summary> 129 /// 生成统计图片 130 /// </summary> 131 /// <param name="chart"></param> 132 /// <param name="type">图形类别,如柱状,折线型</param> 133 public void CreateStatisticPic(dotnetCHARTING.Chart chart) 134 { 135 chart.Title = this.Title; 136 chart.XAxis.Label.Text = this.XTitle; 137 chart.YAxis.Label.Text = this.YTitle; 138 chart.TempDirectory = this.PhaysicalImagePath; 139 chart.FileManager.FileName = this.FileName; 140 chart.Width = this.PicWidth; 141 chart.Height = this.PicHight; 142 chart.Type = ChartType.Combo; 143 chart.DefaultSeries.Type = this.Type; //统一使用默认的序列图类型属性 144 chart.Series.Name = this.SeriesName; 145 chart.SeriesCollection.Add(this.DataSource); 146 chart.DefaultSeries.DefaultElement.ShowValue = true; 147 chart.ShadingEffect = true; 148 chart.Use3D = this.Use3D; 149 chart.Series.DefaultElement.ShowValue = true; 150 } 151 } 152 }
3,新建一个ASP.NET页面,前台代码如下:
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Statistics.aspx.cs" Inherits="ting.Views.Statistics" %> <%@ Register Assembly="dotnetCHARTING" Namespace="dotnetCHARTING" TagPrefix="dotnetCHARTING" %> <!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> <dotnetCHARTING:Chart ID="Chart1" runat="server"> </dotnetCHARTING:Chart> </div> <p> 请选择报表类型:<asp:DropDownList ID="DropDownList1" runat="server" AutoPostBack="True" OnSelectedIndexChanged="DropDownList1_SelectedIndexChanged"> </asp:DropDownList> </p> </form> </body> </html> <script type="text/javascript"> var obj = document.getElementsByTagName("map")[0]; obj.parentNode.removeChild(obj); //屏蔽隐藏的链接 </script>
后台代码如下:
using System; using System.Collections; using System.Configuration; using System.Data; using System.Linq; using System.Web; using System.Web.Security; using System.Web.UI; using System.Web.UI.HtmlControls; using System.Web.UI.WebControls; using System.Web.UI.WebControls.WebParts; using System.Xml.Linq; using System.Drawing; using dotnetCHARTING; using ting.Models.BLL; namespace ting.Views { public partial class Statistics : System.Web.UI.Page { protected void Page_Load(object sender, EventArgs e) { if (!Page.IsPostBack) { Drawing("Bar"); DropDownList1.Items.Add(new ListItem("AreaLine", "AreaLine")); DropDownList1.Items.Add(new ListItem("Bar", "Bar")); DropDownList1.Items.Add(new ListItem("Column", "Column")); DropDownList1.Items.Add(new ListItem("Cylinder", "Cylinder")); DropDownList1.Items.Add(new ListItem("Line", "Line")); DropDownList1.Items.Add(new ListItem("Marker", "Marker")); DropDownList1.Items.Add(new ListItem("Spline", "Spline")); } } private void Drawing(string type) { Charting c = new Charting(); c.Title = "2015年月销售统计图"; c.XTitle = "2015年各月份"; c.YTitle = "销售额(千元)/销售量(束)"; c.PicHight = 450; c.PicWidth = 670; c.SeriesName = "合计";//仅对于DataTable类型做数据源时,此属性有效 c.PhaysicalImagePath = "/images/ChartImages";//统计图片存放的文件夹名称,缺少对应的文件夹生成不了统计图片 c.FileName = "Statistics51aspx"; if (type == "AreaLine") c.Type = SeriesType.AreaLine; else if (type == "Bar") c.Type = SeriesType.Bar; else if (type == "Column") c.Type = SeriesType.Column; else if (type == "Cylinder") c.Type = SeriesType.Cylinder; else if (type == "Line") c.Type = SeriesType.Line; else if (type == "Marker") c.Type = SeriesType.Marker; else c.Type = SeriesType.Spline; c.Use3D = true; //3D模式 c.DataSource = GetDataSource(); c.CreateStatisticPic(this.Chart1); } /// <summary> /// 生成统计图片的数据源模型(单一或对比图都可以) /// </summary> /// <returns></returns> private SeriesCollection GetDataSource() { ting.Models.BLL.AdminOPT adopt = new ting.Models.BLL.AdminOPT(); SeriesCollection SC = new SeriesCollection(); Random rd = new Random(); // 生成对比图 for (int a = 1; a <= 2; a++) //对比的项数,如年各月的月销售额和月利润载客量数据对比就相当于有两个数据项 { Series s = new Series(); s.Name = (a == 1 ? "月销售额合计(千元)" : "销售量合计(束)");//各个数据项代表的名称,如月销售额和月利润12个月载客量走势图,则一条表示月销售额,一条表示月利润 if (a == 1) { for (int b = 1; b <= 12; b++) //X轴尺度个数,如12个月表示有12个尺度数 { Element e = new Element(); e.Name = b.ToString();//对应于X轴个尺度的名称 e.YValue = Convert.ToDouble(adopt.Get_MonthCountMoney(b)/999.00);//与X轴对应的Y轴的数值 s.Elements.Add(e); } } if(a==2) { for (int b = 1; b <= 12; b++) //X轴尺度个数,如12个月表示有12个尺度数 { Element e = new Element(); e.Name = b.ToString();//对应于X轴个尺度的名称 e.YValue = Convert.ToDouble(adopt.Get_MonthCountNum(b));//与X轴对应的Y轴的数值 s.Elements.Add(e); } } SC.Add(s); } //可自定义填充图的填充色,系统采取默认分配各数据项的填充色 //SC[0].DefaultElement.Color = Color.Blue; //SC[1].DefaultElement.Color = Color.Red; //SC[2].DefaultElement.Color = Color.FromArgb(255, 99, 49); //SC[3].DefaultElement.Color = Color.FromArgb(0, 156, 255); return SC; } protected void DropDownList1_SelectedIndexChanged(object sender, EventArgs e) { Drawing(DropDownList1.SelectedValue); } } }
解释:我用的是MVC,所以ASP界面我用iframe调出。关键代码都有注释。
分别把销售量和销售额给算出来。首先定义报表类SeriesCollection。
Series 为一个报表汇总。Element顾名思义是报表里的元数据。X轴为月份。Y轴为自定义数据。
<div style="float: left; 100%; margin: 0 auto; border: solid 1px #DDDDDD;"> <iframe id="no1" width="700" height="440" scrolling="no" src="../../Statistics.aspx"></iframe> </div>
效果图如下: