最近项目要用到Dundas Chart组件了,做个小东西熟悉一下,做了一天了,图的效果不错。
![](https://www.cnblogs.com/images/cnblogs_com/raylovelc/Chart.jpg)
this is html code
![](https://www.cnblogs.com/Images/OutliningIndicators/ContractedBlock.gif)
Code
1![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gif)
<%
@ Page Language="C#" AutoEventWireup="true" Codebehind="HandsDrawingChart.aspx.cs"
2
Inherits="DundasChartDemo.HandsDrawingChart" %>
3![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
4
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
5
<html xmlns="http://www.w3.org/1999/xhtml">
6
<head runat="server">
7
<title>Dundas Chart Demo</title>
8
</head>
9
<body>
10
<form id="form1" runat="server">
11
<div>
12
<table width="80%" border="1">
13
<!--Title-->
14
<tr>
15
<td colspan="2" align="center">
16
<p>
17
<font color="blue">this is a dynamic chart</font></p>
18
</td>
19
</tr>
20
<tr>
21
<td>
22
<asp:Button ID="btnSearch" runat="server" Text="显示图表" OnClick="btnSearch_Click" />
23
</td>
24
<td>
25
</td>
26
</tr>
27
<tr>
28
<td><asp:Image ID="Image1" runat="server" Visible="false"/>
29
</td>
30
<td>
31
</td>
32
</tr>
33
<tr>
34
<td><p>dundas chart demo</p>
35
</td>
36
<td><p>it is very cool</p>
37
</td>
38
</tr>
39
</table>
40
</div>
41
</form>
42
</body>
43
</html>
44![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
Code Bihind
![](https://www.cnblogs.com/Images/OutliningIndicators/ContractedBlock.gif)
Code
1
using Dundas.Charting.WebControl;
2
using System.Drawing;
3![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
4
namespace DundasChartDemo
5![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ContractedBlock.gif)
{
6
public partial class HandsDrawingChart : System.Web.UI.Page
7![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
8
protected void Page_Load(object sender, EventArgs e)
9![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
10![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
11
}
12![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
13
protected void btnSearch_Click(object sender, EventArgs e)
14![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
15
this.CreateChart();
16
this.Image1.Visible = true;
17
this.Image1.ImageUrl = "~/chart.jpg";
18
}
19![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
20![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
/**//// <summary>
21
/// create chart dynmic
22
/// </summary>
23
protected void CreateChart()
24![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
25
//needed to bind data
26
double industry1 = 19.32;
27
double industry2 = 361.38;
28
double industry3 = 501.01;
29
double industryfull = 1020.05;
30
double fixedasserts = 216.13;//fixed 固定的 assert断言,声称
31
double retailtrade = 32.06;//retail 零售
32
double foreigntrade = 443.34;
33
double foreigncapital = 3.41;
34![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
35![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
36
//crate a chart for industry
37
Chart Chart1 = new Chart();//define a chart object
38
Chart1.BackImage = this.Server.MapPath("~/images/backimage.gif");//背景图片
39
Chart1.BackGradientEndColor = Color.White;//gradient 倾斜度
40
Chart1.BorderLineColor = Color.Transparent;//border的颜色,border是什么?最外层边框厚度
41
Chart1.BorderLineWidth = 0;
42
Chart1.BorderSkin.FrameBackColor = Color.MediumTurquoise;//borderskin是什么?
43
Chart1.BorderSkin.FrameBackGradientEndColor = Color.Teal;//teal是什么颜色?
44
Chart1.Palette = ChartColorPalette.Dundas;//palette 默板?颜色默板
45
Chart1.Width = 545;//chart's width
46
Chart1.Height = 312;//chart's height
47
Chart1.ImageType = ChartImageType.Jpeg;//chart's type like jpg png or svg also
48
Chart1.AntiAliasing = AntiAliasing.Text;//antialiasing is what?
49
Chart1.Titles.Add("ChartDemo");//add a title to titles collection
50
Chart1.Titles[0].Text = "Dynamic Chart Demo";
51
Chart1.Titles[0].Alignment = ContentAlignment.BottomCenter;//title 的对齐方式
52
Chart1.Titles[0].Font = new Font("黑体", 12, FontStyle.Bold);//set title[0]'s font style
53
Chart1.Titles[0].Color = Color.FromArgb(72, 72, 72);
54![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
55![](https://www.cnblogs.com/Images/OutliningIndicators/ContractedSubBlock.gif)
pie chart 一产 二产 三产#region pie chart 一产 二产 三产
56
//define chart style
57
Chart1.ChartAreas.Add("Default");//添加一个chartarea,图表区
58
ChartArea chartarea1 = Chart1.ChartAreas["Default"];
59
chartarea1.Area3DStyle.Enable3D = true;//设置3d样式
60
chartarea1.Area3DStyle.Light = LightStyle.None;//光线样式吗?
61
chartarea1.Area3DStyle.XAngle = 70;//what
62
chartarea1.Area3DStyle.YAngle = 60;//what
63
chartarea1.BorderWidth = 0;
64
chartarea1.BackColor = Color.Transparent;
65
chartarea1.Position.Auto = false;//position is what?
66
chartarea1.Position.Width = 50;
67
chartarea1.Position.Height = 30;
68
chartarea1.Position.X = 65;
69
chartarea1.Position.Y = 10;
70![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
71![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
/**////设置图例区域样式
72
Legend legend1=Chart1.Legends["Default"];
73
legend1.Alignment=StringAlignment.Center;
74
legend1.BorderWidth = 1;
75
legend1.Font = new Font("幼圆",8,FontStyle.Bold);//字体
76
legend1.BackColor = Color.Transparent;
77
legend1.FontColor = Color.Black;
78
legend1.DockInsideChartArea = true;//what is this
79
legend1.DockToChartArea = "Default";//chartarea 's name?
80![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
81![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
/**////邦定数据("一产","二产","三产")
82![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
double[] yValue =
{ industry1, industry2, industry3 };
83![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
string[] xValue =
{ "一产", "二产", "三产" };
84
Chart1.Series.Add("Default");
85
Series series1=Chart1.Series["Default"];//get default series
86
series1.Points.DataBindXY(xValue,yValue);//bind a array
87
series1.Type = SeriesChartType.Pie;//制定series的type
88
series1.BorderColor = Color.White;
89
series1.Palette = ChartColorPalette.Dundas;
90
series1["LabelStyle"] = "Disabled";
91
series1.ChartArea = "Default";
92
series1.Legend = "Default";
93
#endregion
94![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
95![](https://www.cnblogs.com/Images/OutliningIndicators/ContractedSubBlock.gif)
pie chart 投资 消费 出口#region pie chart 投资 消费 出口
96![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
97![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
/**////set style
98
Chart1.ChartAreas.Add("Second");
99
ChartArea chartarea2=Chart1.ChartAreas["Second"];
100
chartarea2.Area3DStyle.Enable3D = true;//set 3d style
101
chartarea2.Area3DStyle.Light = LightStyle.None;//?
102
chartarea2.Area3DStyle.XAngle=70;
103
chartarea2.Area3DStyle.YAngle=60;
104
chartarea2.BorderWidth = 0;
105
chartarea2.BackColor = Color.Transparent;
106
chartarea2.Position.Auto = false;//?
107
chartarea2.Position.Width = 50;
108
chartarea2.Position.Height = 30;
109
chartarea2.Position.X = 65;//?
110
chartarea2.Position.Y = 32;//?
111![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
112![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
/**////图例区域样式
113
Legend legend2 = new Legend("Second");
114
Chart1.Legends.Add(legend2);
115
legend2.Alignment = StringAlignment.Center;
116
legend2.BorderWidth = 0;
117
legend2.BackColor = Color.Transparent;
118
legend2.Font = new Font("幼圆", 8, FontStyle.Bold);
119
legend2.FontColor = Color.Black;
120
legend2.DockInsideChartArea = true;//this is false
121
legend2.DockToChartArea = "Second";
122![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
123![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
double[] yValue2 =
{ fixedasserts,retailtrade,foreigntrade};
124![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
string[] xValue2 =
{"投资", "消费", "出口"};
125
Chart1.Series.Add("Series2");
126
Series series2=Chart1.Series["Series2"];
127
series2.Points.DataBindXY(xValue2,yValue2);
128
series2.Type = SeriesChartType.Pie;
129
series2.BorderColor = Color.White;
130
series2.Palette = ChartColorPalette.Dundas;
131
series2["LabelStyle"] = "Disabled";
132
series2.ChartArea = "Second";
133
series2.Legend = "Second";
134
#endregion
135![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
136![](https://www.cnblogs.com/Images/OutliningIndicators/ContractedSubBlock.gif)
柱状图#region 柱状图
137![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
138![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
double[] yValues =
{ industry1, industry2,industryfull,0, industry3,fixedasserts,retailtrade,foreigntrade,foreigncapital };
139
double x = MaxValue(yValue) / 10;
140![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
141
Chart1.ChartAreas.Add("Third");
142
ChartArea chartarea3=Chart1.ChartAreas["Third"];
143
chartarea3.Area3DStyle.Enable3D = false; //是否3d效果
144
chartarea3.Area3DStyle.Light = LightStyle.Realistic;//这个效果没看出来
145
146
//设置x轴的style
147
chartarea3.AxisX.LineColor = Color.FromArgb(64,64,64);
148
chartarea3.AxisX.LabelStyle.Font = new Font("幼圆",8,FontStyle.Bold);
149
chartarea3.AxisX.LabelStyle.FontColor = Color.Black;
150
chartarea3.AxisX.LabelStyle.OffsetLabels = false;//what is this? 可以理解为是否允许xname换行,单排显示,还是起伏错开显示 offset:偏移量
151
chartarea3.AxisX.LabelsAutoFit = false;//? 感觉效果同上 是否允许出现偏移
152
chartarea3.AxisX.MajorGrid.Enabled = false;//what is this ? 线 纬度线 是否显示水平方向的线条
153
chartarea3.AxisX.MajorTickMark.Enabled = true;//2 up? 是否在x轴做标记,
154
chartarea3.AxisX.MajorTickMark.LineColor = Color.Transparent;
155
chartarea3.AxisX.MajorTickMark.Interval = 4;//what is this? 每个4个标记一下x轴
156
chartarea3.AxisX.Title = "产业";
157![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
158
//设置y轴style
159
chartarea3.AxisY.CustomLabels.Add(0,MaxValue(yValues)*2.3,"亿元");//?
160
chartarea3.AxisY.LabelStyle.Enabled = true;//what is this? Y轴的lable
161
chartarea3.AxisY.LabelStyle.FontAngle = 0; //2 up?
162
chartarea3.AxisY.LabelStyle.Font = new Font("幼圆",8,FontStyle.Bold);
163
chartarea3.AxisY.MajorGrid.Enabled = false;//? 线 经度线 是否显示垂直方向的线条
164
chartarea3.AxisY.MajorTickMark.Enabled = false;//? 是否显示y周标记
165
chartarea3.AxisY.Title = "产值";
166![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
167
//chartarea 的style
168
chartarea3.BorderWidth = 0;
169
chartarea3.BackColor = Color.Transparent;
170
chartarea3.Position.Auto = false;//what is this
171
chartarea3.Position.Width = 80;//persent
172
chartarea3.Position.Height = 67;
173
chartarea3.Position.X = 5;//? 图片位于chart内的起始x坐标,最右边100 和我们长用的坐标反向,老外就是不一样,
174
chartarea3.Position.Y = 28;//? 图片位于chart内的起始y坐标,最下边100
175![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
176
Legend legend3 = new Legend("Third");
177
Chart1.Legends.Add(legend3);
178
legend3.Enabled = false;
179
legend3.DockToChartArea = "Third";
180![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
181
//数据源
182![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
double[] yValue3 =
{ industry1 + x, industry2 + x, industryfull + x, 0, industry3 + x, fixedasserts + x, retailtrade + x, foreigntrade + x, foreigncapital + x };
183![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
string[] xValue3 =
{"第一产业", "第二产业", "工业总产值", " ", "第三产业", "固定资产投资", "消费零售总额", "外贸出口", "实际利用外资" };
184![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
185
Chart1.Series.Add("Series3");
186
Series series3=Chart1.Series["Series3"];
187
series3.Points.DataBindXY(xValue3,yValue3);//databind
188
series3.Type = SeriesChartType.Column;//柱状图
189
series3.BorderColor = Color.White;
190
series3.BackGradientType = GradientType.VerticalCenter;//?
191
series3.BackGradientEndColor = Color.Khaki;//?
192
series3.Color = Color.FromArgb(255,128,0);
193
series3["PointWidth"]="0.5";//柱子的宽度
194
series3.ChartArea = "Third";
195
series3.Legend = "Third";
196![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
197
Chart1.Series.Add("Series4");
198
Series series4=Chart1.Series["Series4"];
199
series4.Type = SeriesChartType.Spline;
200
//series4.Points.DataBindXY(xValue3,yValue3);
201
series4.ChartArea = "Third";
202
series4.Legend = "Third";
203![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
204
Chart1.Series["Series4"].Points.DataBindY(yValue3);
205![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
206
//显示每列的值
207
int count = series3.Points.Count;
208
for (int i = 0; i < count; i++)
209![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
210
if (yValue3[i] != 0)
211![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
212
series3.Points[i].Label = yValue3[i].ToString();
213
}
214
}
215![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
216
#endregion
217![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
218
//save to memory
219
Chart1.Save(this.Server.MapPath("~/chart.jpg"), ChartImageFormat.Jpeg);//server.mappath 映射成服务器绝对路径
220
}
221![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
222![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
/**//// <summary>
223
/// get a double array's maxvalue
224
/// </summary>
225
/// <param name="array"></param>
226
public double MaxValue(double[] array)
227![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
228
double maxValue = 0;
229
int length = array.Length;
230![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
231
for (int i = 0; i < length; i++)
232![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
233
if (array[i] > maxValue)
234![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
235
maxValue=array[i];
236
}
237
}
238![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
239
return maxValue;
240
}
241
}
242
}
这里暂时只演示的静态数据,动态邦定的例子我写完了再发。
总结一下:
/*chart的过程
* 1,new one chart() object
* 2,set chart style
* 3,add chartarea into chart
* 4,new one legend() object
* 5,set legend() style just alin and font
* 6,add legend() to chart's lengends collection
* 7,dock legend() to a chartarea
* 8,add series to chart 's series collection chart1.series.add("name");
* 9,new series() object series ss=chart1.series["name"];
* 10,series databind
* 11,series.chartarea="chartarea name"
* 12,series.legend="legend name"
* 13,series is real chart to show for us eye?!
* 14,save dynamic picture to server and set image control's imageurl is picture's url
*/
偶 Englis very pool.sorry :^)