制作饼状、柱状、线形图
2011-09-07 14:49 TTlive 阅读(448) 评论(0) 编辑 收藏 举报在后台做数据展示的时候会用到这些。先看看效果图吧
.
（饼状图） （线形图） （柱状图）
效果很不错哦.而且初始化的时候还有动画效果.不过要注意这个是利用Flash做的.所以一定要装Flash插件哦。
同样的.必须导入这个控件的DLL文件才能使用。（am.Charts.dll）
导入完成后.新建页面PieChart.aspx
1: <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="PieChart.aspx.cs" Inherits="amCharts.PieChart" %>
2: <%@ Register Assembly="am.Charts" Namespace="am.Charts" TagPrefix="cc1" %>
3: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
4: <html xmlns="http://www.w3.org/1999/xhtml" >
5: <head runat="server">
6: <title>无标题页</title>
7: </head>
8: <body>
9: <form id="form1" runat="server">
10: <div>
11: <cc1:PieChart runat="server" ID="PieChart1"></cc1:PieChart>
12: </div>
13: </form>
14: </body>
15: </html>
后台代码：
1: protected void Page_Load(object sender, EventArgs e)
2: {
3: for (int i = 0; i < 10; i++)
4: {
5: //创建饼状图对象
6: PieChartDataItem pcd1 = new PieChartDataItem();
7: pcd1.Description = "Description" + i.ToString();
8: pcd1.Title = "贪贪" + i.ToString();
9: pcd1.LabelRadius = 1;
10: pcd1.Value = i;
11: pcd1.PullOut = true;
12: PieChart1.Items.Add(pcd1);
13: }
14: //设置大小
15: PieChart1.Width = 600;
16: PieChart1.Height = 500;
17: PieChart1.ScientificMax = 20;
18: PieChart1.Labels.Add(new ChartLabel("饼状图事例", new Unit(100), new Unit(20)));
19: PieChart1.ToolTip = "饼状图";
20: }
后面的2个图形页面代码都是一样的..分别为：ColumnChart，LineChart
ColumnChart后台代码：
1: protected void Page_Load(object sender, EventArgs e)
2: {
3: DataSet ds = new DataSet("column");
4: DataTable dt = new DataTable("columnTable");
5: DataColumn dc_y = new DataColumn("year");
6: DataColumn dc_v = new DataColumn("val");
7:
8: DataColumn dc_v1 = new DataColumn("val1");
9:
10:
11:
12: dt.Columns.Add(dc_y);
13: dt.Columns.Add(dc_v);
14: dt.Columns.Add(dc_v1);
15: Random rd = new Random();
16: for (int i = 2000; i < 2005; i++)
17: {
18: DataRow dr = dt.NewRow();
19: dr[dc_y] = i.ToString();
20: dr[dc_v] = (rd.NextDouble() * i).ToString();
21: dr[dc_v1] = (rd.NextDouble() * (i + i / 3)).ToString();
22: dt.Rows.Add(dr);
23: }
24: ds.Tables.Add(dt);
25:
26: //立体感觉深度
27: ColumnChart1.Depth = 10;
28: //动态升长时间
29: ColumnChart1.ColumnGrowTime = 5;
30: ColumnChart1.Width = new Unit(600);
31: ColumnChart1.Height = new Unit(500);
32: ColumnChart1.PlotAreaBackgroundColor = Color.Yellow;
33:
34: ColumnChart1.ChartDirectory = "~/amcharts/amcolumn/";
35: //柱型1
36: ColumnChartGraph ccg = new ColumnChartGraph();
37: ccg.DataSource = ds;
38: ccg.DataSeriesItemIDField = "year";
39: ccg.Title = "测试";
40: ccg.DataValueField = "val";
41: //形状,可以是柱型,也可以是线型
42: ccg.GraphType = ColumnChartGraphTypes.Column;
43: ColumnChart1.Graphs.Add(ccg);
44:
45: ColumnChartGraph ccg1 = new ColumnChartGraph();
46: ccg1.DataSource = ds;
47: ccg1.DataSeriesItemIDField = "year";
48: ccg1.Title = "测试1";
49: ccg1.DataValueField = "val1";
50: ccg1.GraphType = ColumnChartGraphTypes.Column;
51: ColumnChart1.Graphs.Add(ccg1);
52:
53: //设置上面显示的文字格式
54: ColumnChart1.ColumnDataLabelFormatString = "{value}";
55: ColumnChart1.LineBalloonTextFormatString = "{value}";
56:
57: ColumnChart1.DataSource = ds;
58: ColumnChart1.DataSeriesIDField = "year";
59: ColumnChart1.DataBind();
60: }
LineChart后台代码：
1: protected void Page_Load(object sender, EventArgs e)
2: {
3: //自己添加一个数据
4: DataSet ds = new DataSet("Line");
5: DataTable dt = new DataTable("LineTable");
6: DataColumn dc_y = new DataColumn("year");
7: DataColumn dc_v = new DataColumn("val");
8:
9: DataColumn dc_v1 = new DataColumn("val1");
10:
11: dt.Columns.Add(dc_y);
12: dt.Columns.Add(dc_v);
13: dt.Columns.Add(dc_v1);
14: Random rd = new Random();
15: for (int i = 1987; i < 2010; i++)
16: {
17: DataRow dr = dt.NewRow();
18: dr[dc_y] = i.ToString();
19: dr[dc_v] = (rd.NextDouble() * i).ToString();
20: dr[dc_v1] = (rd.NextDouble() * (i + i / 3)).ToString();
21: dt.Rows.Add(dr);
22: }
23: ds.Tables.Add(dt);
24:
25: //设置图形的长高
26: LineChart1.Width = new Unit(600);
27: LineChart1.Height = new Unit(400);
28:
29: //添加一个线条
30: LineChartGraph lcg = new LineChartGraph();
31: //这里是线条峰点的形状(正方形):实心圆,空心圆....
32: lcg.Bullet = LineChartBulletTypes.Square;
33: //这里是线条的颜色
34: //lcg.BulletColor = Color.Yellow;
35: //向下面积的颜色
36: lcg.FillColor = Color.Yellow;
37: //向下面积的透明度
38: lcg.FillAlpha = Convert.ToByte(40);
39: //Y轴值在右边(默认在左边)
40: lcg.Axis = LineChartAxes.Right;
41:
42: lcg.DataSource = ds;
43: lcg.DataSeriesItemIDField = "year";
44: lcg.DataValueField = "val";
45: lcg.Title = "测试1";
46: LineChart1.Graphs.Add(lcg);
47:
48: //添加第二个线条
49: LineChartGraph lcg1 = new LineChartGraph();
50: lcg1.Bullet = LineChartBulletTypes.RoundOutline;
51:
52: lcg1.DataSource = ds;
53: lcg1.DataSeriesItemIDField = "year";
54: lcg1.DataValueField = "val1";
55: lcg1.Title = "测试2";
56: LineChart1.Graphs.Add(lcg1);
57:
58: LineChart1.DataSource = ds;
59: LineChart1.DataSeriesIDField = "year";
60: LineChart1.DataBind();
61:
62: }
代码仅供参考.在实际应用中变数很大.还需理解后才能运用。
