Dundas Chart Demo For New User-优快云博客

最近项目要用到Dundas Chart组件了，做个小东西熟悉一下，做了一天了，图的效果不错。

this is html code

Code
1

@ Page Language="C#" AutoEventWireup="true" Codebehind="HandsDrawingChart.aspx.cs"
2

Inherits="DundasChartDemo.HandsDrawingChart" %>
3

<!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

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

Code Bihind

Code
1

using Dundas.Charting.WebControl;
2

using System.Drawing;
3

namespace DundasChartDemo
5

{
6

public partial class HandsDrawingChart : System.Web.UI.Page
7

{
8

protected void Page_Load(object sender, EventArgs e)
9

{
10

}
12

protected void btnSearch_Click(object sender, EventArgs e)
14

{
15

this.CreateChart();
16

this.Image1.Visible = true;
17

this.Image1.ImageUrl = "~/chart.jpg";
18

}
19

/**//// <summary>
21

/// create chart dynmic
22

/// </summary>
23

protected void CreateChart()
24

{
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

//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

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

/**////设置图例区域样式
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

/**////邦定数据("一产","二产","三产")
82

double[] yValue =

{ industry1, industry2, industry3 };
83

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

pie chart 投资消费出口#region pie chart 投资消费出口
96

/**////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

112

/**////图例区域样式
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

123

double[] yValue2 =

{ fixedasserts,retailtrade,foreigntrade};
124

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

136

柱状图#region 柱状图
137

138

double[] yValues =

{ industry1, industry2,industryfull,0, industry3,fixedasserts,retailtrade,foreigntrade,foreigncapital };
139

double x = MaxValue(yValue) / 10;
140

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

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

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

176

Legend legend3 = new Legend("Third");
177

Chart1.Legends.Add(legend3);
178

legend3.Enabled = false;
179

legend3.DockToChartArea = "Third";
180

181

//数据源
182

double[] yValue3 =

{ industry1 + x, industry2 + x, industryfull + x, 0, industry3 + x, fixedasserts + x, retailtrade + x, foreigntrade + x, foreigncapital + x };
183

string[] xValue3 =

{"第一产业", "第二产业", "工业总产值", " ", "第三产业", "固定资产投资", "消费零售总额", "外贸出口", "实际利用外资" };
184

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

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

204

Chart1.Series["Series4"].Points.DataBindY(yValue3);
205

206

//显示每列的值
207

int count = series3.Points.Count;
208

for (int i = 0; i < count; i++)
209

{
210

if (yValue3[i] != 0)
211

{
212

series3.Points[i].Label = yValue3[i].ToString();
213

}
214

}
215

216

#endregion
217

218

//save to memory
219

Chart1.Save(this.Server.MapPath("~/chart.jpg"), ChartImageFormat.Jpeg);//server.mappath 映射成服务器绝对路径
220

}
221

222

/**//// <summary>
223

/// get a double array's maxvalue
224

/// </summary>
225

/// <param name="array"></param>
226

public double MaxValue(double[] array)
227

{
228

double maxValue = 0;
229

int length = array.Length;
230

231

for (int i = 0; i < length; i++)
232

{
233

if (array[i] > maxValue)
234

{
235

maxValue=array[i];
236

}
237

}
238

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 :^)

转载于:https://www.cnblogs.com/raylovelc/archive/2008/05/06/1185354.html