制作饼状、柱状、线形图

在后台做数据展示的时候会用到这些。先看看效果图吧

.未命名 1 2

                 (饼状图)                                        (线形图)                                   (柱状图)

效果很不错哦.而且初始化的时候还有动画效果.不过要注意这个是利用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:         }

代码仅供参考.在实际应用中变数很大.还需理解后才能运用。

posted @ 2011-08-10 18:04  .net|C#|js|jquery|css|div|html  阅读(4537)  评论(0编辑  收藏  举报