WebChartControl 学习小结

因为在项目的我只遇到了饼状，柱状，线状三种图表所以我只试着学习了这三种方式的编写，嘿嘿

第一步：下载WebChart控件；

第二步：将WebChart.dll添加到工具箱它显示的控件名称为：ChartControl；

第三步：新建WebForm，将工具箱中的ChartControl控件（即WebChart控件）添加到Default.aspx页面，并设置控件ID为ccPie，在属性控件器上设置ChartTitle为My Pie，XTitle为Month，YTitle为Value等属性；

第四步：在后台代码.cs文件中，添加 Using WebChart;

第五步：现在来做饼状图表，它的实现可以说相当简单（像我这种智商的人都可以理解，所以说简单）如下：

1.    //填充饼状图表
2.     protected void showPie()
3.     {
4.         try
5.         {
6.             //创建一个饼状图表的实例
7.             PieChart chart = new PieChart();
8.             //绑定数据源
9.             chart.DataSource = this.getSingleData().Tables[0].DefaultView;
10.             //设置X轴所对应的字段
11.             chart.DataXValueField = "Month";
12.             chart.DataYValueField = "value";
13.             //设置是否显示图表各部分的值
14.             chart.DataLabels.Visible = true;
15.             //设置显示值的字体颜色
16.             chart.DataLabels.ForeColor = System.Drawing.Color.Blue;
17.             //设置是否显示阴影
18.             chart.Shadow.Visible = true;
19.             chart.DataBind();
20.             //将饼状图表添加到图表容器
21.             ccPie.Charts.Add(chart);
22.             //画出图表
23.             ccPie.RedrawChart();
24.         }
25.         catch (Exception exPie)
26.         {
27.             throw new Exception(exPie.Message);
28.         }
29.     }
31.     protected DataSet getSingleData()
32.     {
33.         DataSet ds = new DataSet();
34.         Random rd = new Random(1);
36.         try
37.         {
38.             DataTable dt = new DataTable();
39.             dt.Columns.Add("Month", typeof(string));
40.             dt.Columns.Add("value", typeof(string));
42.             for (int i = 1; i < 13; i++)
43.             {
44.                 DataRow row = dt.NewRow();
45.                 row[0] = i.ToString();
46.                 row[1] = Convert.ToInt32(rd.NextDouble() * 100);
47.                 dt.Rows.Add(row);
48.             }
50.             ds.Tables.Add(dt);
51.         }
52.         catch (Exception exD)
53.         {
54.             Response.Write(exD.Message);
55.         }
56.         finally
57.         {
58.             ds.Dispose();
59.         }
61.         return ds;
62.     }

以上代码的实现效果如下：

 

图表各部分的颜色可以在将图表实例添加到图表容器前使用如下语句指定：

            chart.Colors = new Color[] { Color.Red, Color.Blue, Color.Yellow, Color.Cyan, Color.Black, Color.RosyBrown,Color.Green,Color.Pink,Color.Purple,Color.GreenYellow,Color.Navy,Color.YellowGreen };
当然，为了使图表表现的更丰富你还可以通过设置其他属性来实现，好学的人们慢慢研究一下吧，嘻嘻

 

至于柱状图表嘛也没什么太可记录的，忽略了，附件为源码；

现在还是主要记录一下线状图吧，不是一条而是多线，嘿嘿

 

在Defalut.aspx页面上添加WebChart控件，设置ID为ccLine

.cs后台代码如下

1.   //填充线状图表
2.     protected void showLines()
3.     {
4.         try
5.         {
6.             DataSet ds = getMultiData();
8.             LineChart lc1 = new LineChart();
9.             lc1.Line.Color = Color.Green;
10.             lc1.Fill.Color = Color.Green;
11.             //设置在值点处线的显示形状
12.             lc1.LineMarker = new DiamondLineMarker(5, Color.Green, Color.Black);
13.             //设置图例的表示值，如果使用了图表中自带的样式，需要显示设置HasChartLegend来决定是否显示图例
14.             lc1.Legend = "Value 1";
16.             LineChart lc2 = new LineChart();
17.             lc2.Line.Color = Color.Blue;
18.             lc2.Fill.Color = Color.Blue;
19.             lc2.LineMarker = new CircleLineMarker(5, Color.Blue, Color.Green);
20.             lc2.Legend = "Value 2";
22.             LineChart lc3 = new LineChart();
23.             lc3.Line.Color = Color.Red;
24.             lc3.Fill.Color = Color.Red;
25.             lc3.LineMarker = new DiamondLineMarker(5, Color.Red, Color.Black);
26.             lc3.Legend = "Value 3";
28.             LineChart lc4 = new LineChart();
29.             lc4.Line.Color = Color.Purple;
30.             lc4.Fill.Color = Color.Purple;
31.             lc4.LineMarker = new DiamondLineMarker(8, Color.Purple, Color.Yellow);
32.             lc4.Legend = "Value 4";
34.             foreach (DataRow row in ds.Tables[0].Rows)
35.             {
36.                 lc1.Data.Add(new ChartPoint(row[0].ToString(), float.Parse(row[1].ToString())));
37.                 lc2.Data.Add(new ChartPoint(row[0].ToString(), float.Parse(row[2].ToString())));
38.                 lc3.Data.Add(new ChartPoint(row[0].ToString(), float.Parse(row[3].ToString())));
39.                 lc4.Data.Add(new ChartPoint(row[0].ToString(), float.Parse(row[4].ToString())));
40.             }
42.             ccLine.Charts.Add(lc1);
43.             ccLine.Charts.Add(lc2);
44.             ccLine.Charts.Add(lc3);
45.             ccLine.Charts.Add(lc4);
46.             ccLine.RedrawChart();
47.         }
48.         catch (Exception exPie)
49.         {
50.             Response.Write(exPie.Message);
51.         }
52.     }

效果如下：

有一处我感觉不太好就是在图例的显示中总是以小正方形显示，而不能对应相应的节点值的形状，如红色线记录对应菱形，这个可能是在控件中没有实现此功能，有待继续研究……

 

汗水一个先，不知道如何上传附件，所以源码就贴在下面吧，再汗！

1. <%@ Page Language="C#" AutoEventWireup="true"  CodeFile="Default.aspx.cs" Inherits="_Default" %>
3. <%@ Register Assembly="WebChart" Namespace="WebChart" TagPrefix="Web" %>
5. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
7. <html xmlns="http://www.w3.org/1999/xhtml" >
8. <head runat="server">
9.     <title>学习如何制作web图表</title>
10. </head>
11. <body>
12.     <form id="form1" runat="server">
13.     <div>
14.         <table>
15.             <tr>
16.                 <td style="width: 100px">
17.                     <asp:GridView ID="gvPie" runat="server">
18.                     </asp:GridView>
19.                 </td>
20.                 <td style="width: 100px">
21.                     <Web:ChartControl ID="ccPie" runat="server" BorderStyle="Outset" BorderWidth="5px"
22.                         GridLines="None" Height="400px" LeftChartPadding="20" Padding="20" Width="500px">
23.                         <YAxisFont StringFormat="Far,Near,Character,LineLimit" />
24.                         <ChartTitle StringFormat="Center,Near,Character,LineLimit" Text="My Pie" />
25.                         <XAxisFont StringFormat="Center,Near,Character,LineLimit" />
26.                         <Background Color="LightSteelBlue" />
27.                         <YTitle StringFormat="Center,Near,Character,DirectionVertical" Text="Value" />
28.                         <XTitle StringFormat="Center,Near,Character,LineLimit" Text="Month" />
29.                     </Web:ChartControl></td>
30.             </tr>
31.             <tr>
32.                 <td style="width: 100px">
33.                     <asp:GridView ID="gvColumn" runat="server">
34.                     </asp:GridView>
35.                 </td>
36.                 <td style="width: 100px">
37.                     <Web:ChartControl ID="ccColumn" runat="server" BorderStyle="Outset" BorderWidth="5px"
38.                         Height="400px" Padding="20" Width="500px">
39.                         <YAxisFont StringFormat="Far,Near,Character,LineLimit" />
40.                         <XTitle StringFormat="Center,Near,Character,LineLimit" Text="Month" />
41.                         <ChartTitle StringFormat="Center,Near,Character,LineLimit" Text="My Column" />
42.                         <XAxisFont StringFormat="Center,Near,Character,LineLimit" />
43.                         <Background Color="LightSteelBlue" />
44.                         <YTitle StringFormat="Center,Near,Character,DirectionVertical" Text="Value" />
45.                     </Web:ChartControl></td>
46.             </tr>
47.             <tr>
48.                 <td style="width: 100px">
49.                     <asp:GridView ID="gvLine" runat="server">
50.                     </asp:GridView>
51.                 </td>
52.                 <td style="width: 100px">
53.                     <Web:ChartControl ID="ccLine" runat="server" BorderStyle="Outset" BorderWidth="5px"
54.                         Height="400px" Padding="20" Width="500px">
55.                         <YAxisFont StringFormat="Far,Near,Character,LineLimit" />
56.                         <XTitle StringFormat="Center,Near,Character,LineLimit" Text="Month" />
57.                         <ChartTitle StringFormat="Center,Near,Character,LineLimit" Text="My Lines" />
58.                         <XAxisFont StringFormat="Center,Near,Character,LineLimit" />
59.                         <Background Color="LightSteelBlue" />
60.                         <YTitle StringFormat="Center,Near,Character,DirectionVertical" Text="Value" />
61.                     </Web:ChartControl></td>
62.             </tr>
63.         </table>
64.         
65.     </div>
66.     </form>
67. </body>
68. </html>
70. ********************
71. using System;
72. using System.Data;
73. using System.Configuration;
74. using System.Web;
75. using System.Web.Security;
76. using System.Web.UI;
77. using System.Web.UI.WebControls;
78. using System.Web.UI.WebControls.WebParts;
79. using System.Web.UI.HtmlControls;
81. using System.Drawing;
82. using WebChart;
84. public partial class _Default : System.Web.UI.Page 
85. {
86.     //我们可以利用此控件创建下列样式的图表
87.     //1. Line Charts 
88.     //2. Smooth Line Charts 
89.     //3. Column Charts 
90.     //4. Area Charts 
91.     //5. Scattered Charts 
92.     //6. Stacked Column Charts 
93.     //7. Pie Charts 
94.     //8. Stacked Area Charts 
96.     protected void Page_Load(object sender, EventArgs e)
97.     {
98.         try
99.         {
100.             showPieData();
101.             showPie();
103.             showColumnData();
104.             showColumn();
106.             showLineData();
107.             showLines();           
108.         }
109.         catch (Exception ex)
110.         {
111.             Response.Clear();
112.             Response.Write(ex.Message);
113.         }
114.     }
116.     //一个数据
117.     protected DataSet getSingleData()
118.     {
119.         DataSet ds = new DataSet();
120.         Random rd = new Random(1);
122.         try
123.         {
124.             DataTable dt = new DataTable();
125.             dt.Columns.Add("Month", typeof(string));
126.             dt.Columns.Add("value", typeof(string));
128.             for (int i = 1; i < 13; i++)
129.             {
130.                 DataRow row = dt.NewRow();
131.                 row[0] = i.ToString();
132.                 row[1] = Convert.ToInt32(rd.NextDouble() * 100);
133.                 dt.Rows.Add(row);
134.             }
136.             ds.Tables.Add(dt);
137.         }
138.         catch (Exception exD)
139.         {
140.             Response.Write(exD.Message);
141.         }
142.         finally
143.         {
144.             ds.Dispose();
145.         }
147.         return ds;
148.     }
150.     //多个数据
151.     protected DataSet getMultiData()
152.     {
153.         DataSet ds = new DataSet();
154.         Random rd = new Random(1);
156.         try
157.         {
158.             DataTable dt = new DataTable();
159.             dt.Columns.Add("Month", typeof(string));
160.             dt.Columns.Add("value1", typeof(string));
161.             dt.Columns.Add("value2", typeof(string));
162.             dt.Columns.Add("value3", typeof(string));
163.             dt.Columns.Add("value4", typeof(string));
165.             for (int i = 1; i < 13; i++)
166.             {
167.                 DataRow row = dt.NewRow();
168.                 row[0] = i.ToString();
169.                 row[1] = Convert.ToInt32(rd.NextDouble() * 100);
170.                 row[2] = Convert.ToInt32(rd.NextDouble() * 100);
171.                 row[3] = Convert.ToInt32(rd.NextDouble() * 100);
172.                 row[4] = Convert.ToInt32(rd.NextDouble() * 100);
173.                 dt.Rows.Add(row);
174.             }
176.             ds.Tables.Add(dt);
177.         }
178.         catch (Exception exD)
179.         {
180.             Response.Write(exD.Message);
181.         }
182.         finally
183.         {
184.             ds.Dispose();
185.         }
187.         return ds;
188.     }
190.     //显示gvPie
191.     protected void showPieData()
192.     {
193.         gvPie.DataSource = getSingleData().Tables[0].DefaultView;
194.         gvPie.DataBind();
195.     }
197.     //显示gvColumn
198.     protected void showColumnData()
199.     {
200.         gvColumn.DataSource = getSingleData().Tables[0].DefaultView;
201.         gvColumn.DataBind();
202.     }
204.     //显示gvLine
205.     protected void showLineData()
206.     {
207.         gvLine.DataSource = getMultiData().Tables[0].DefaultView;
208.         gvLine.DataBind();
209.     }
211.     //填充饼状图表
212.     protected void showPie()
213.     {
214.         try
215.         {
216.             PieChart chart = new PieChart();
217.             chart.DataSource = this.getSingleData().Tables[0].DefaultView;
218.             chart.DataXValueField = "Month";
219.             chart.DataYValueField = "value";
220.             chart.DataLabels.Visible = true;
221.             chart.DataLabels.ForeColor = System.Drawing.Color.Blue;
222.             chart.Shadow.Visible = true;
223.             chart.DataBind();
224.             ccPie.Charts.Add(chart);
225.             ccPie.RedrawChart();
226.         }
227.         catch (Exception exPie)
228.         {
229.             throw new Exception(exPie.Message);
230.         }
231.     }
233.     //填充柱状图表
234.     protected void showColumn()
235.     {
236.         try
237.         {
238.             ColumnChart chart = new ColumnChart();
239.             chart.DataSource = this.getSingleData().Tables[0].DefaultView;
240.             chart.DataXValueField = "Month";
241.             chart.DataYValueField = "value";
242.             chart.Legend = "Data Value";
243.             chart.MaxColumnWidth = 15;
244.             chart.DataLabels.Visible = true;
245.             chart.DataLabels.ForeColor = Color.Blue;
246.             chart.Shadow.Visible = true;
247.             chart.Fill.Color = Color.FromArgb(100, Color.Purple);
248.             chart.DataBind();
249.             ccColumn.Charts.Add(chart);
250.             ccColumn.RedrawChart();
251.         }
252.         catch (Exception exPie)
253.         {
254.             throw new Exception(exPie.Message);
255.         }
256.     }
258.     //填充线状图表
259.     protected void showLines()
260.     {
261.         try
262.         {
263.             DataSet ds = getMultiData();
265.             LineChart lc1 = new LineChart();
266.             lc1.Line.Color = Color.Green;
267.             lc1.Fill.Color = Color.Green;
268.             lc1.LineMarker = new DiamondLineMarker(5, Color.Green, Color.Black);
269.             lc1.Legend = "Value 1";
271.             LineChart lc2 = new LineChart();
272.             lc2.Line.Color = Color.Blue;
273.             lc2.Fill.Color = Color.Blue;
274.             lc2.LineMarker = new CircleLineMarker(5, Color.Blue, Color.Green);
275.             lc2.Legend = "Value 2";
277.             LineChart lc3 = new LineChart();
278.             lc3.Line.Color = Color.Red;
279.             lc3.Fill.Color = Color.Red;
280.             lc3.LineMarker = new DiamondLineMarker(5, Color.Red, Color.Black);
281.             lc3.Legend = "Value 3";
283.             LineChart lc4 = new LineChart();
284.             lc4.Line.Color = Color.Purple;
285.             lc4.Fill.Color = Color.Purple;
286.             lc4.LineMarker = new DiamondLineMarker(8, Color.Purple, Color.Yellow);
287.             lc4.Legend = "Value 4";
289.             foreach (DataRow row in ds.Tables[0].Rows)
290.             {
291.                 lc1.Data.Add(new ChartPoint(row[0].ToString(), float.Parse(row[1].ToString())));
292.                 lc2.Data.Add(new ChartPoint(row[0].ToString(), float.Parse(row[2].ToString())));
293.                 lc3.Data.Add(new ChartPoint(row[0].ToString(), float.Parse(row[3].ToString())));
294.                 lc4.Data.Add(new ChartPoint(row[0].ToString(), float.Parse(row[4].ToString())));
295.             }
297.             ccLine.Charts.Add(lc1);
298.             ccLine.Charts.Add(lc2);
299.             ccLine.Charts.Add(lc3);
300.             ccLine.Charts.Add(lc4);
301.             ccLine.RedrawChart();
302.         }
303.         catch (Exception exPie)
304.         {
305.             Response.Write(exPie.Message);
306.         }
307.     }
308. }