【分享】asp.net WebChart 折线图、饼形图、柱状图

╰半橙微兮° 2021-11-23 02:08 699阅读 0赞

![9acd6f8e4612e544c9fc7a5d.jpg][]

![86d5aedb7d808d0ecdbf1a5e.jpg][]

![eee48655f0c189348435245f.jpg][]

折线图形的数据库设计：

id int

name varchar(50)

dataTime datetime

饼形图和柱状图使用同一个表的数据：

id int

name varchar(50)

shuliang int

下面的ChartControl1、ChartControl2、ChartControl3都是从工具箱拖进页面的webChart控件的ID

1、折线图代码：(实现的为当年的按月份的趋势)

定义颜色：

1   
  2   
  3  private  string \[\] myColor  =  new  string \[\]  
  4   
  5  \{  
  6   
  7  " Tomato " , // 西红柿    
  8    
  9  " Black " ,  
 10   
 11  " Gold " ,  
 12   
 13  " Blue " ,  
 14   
 15  " Green " ,  
 16   
 17  " Orange " ,  
 18   
 19  " Pink " , // 粉红    
 20    
 21  " Violet " , // 紫罗兰    
 22    
 23  " Orchid " , // 淡紫色    
 24    
 25  " Lime " , // 亮绿    
 26    
 27  " Tan " , // 茶色    
 28    
 29  " Red " ,  
 30   
 31  " Navy " // 橘红    
 32    
 33  \};

给webChart绑定数据：

1  private  void  GetLineChart()  
  2   
  3  \{  
  4   
  5  // 创建折线对象   
  6    
  7  LineChart myLineChart  =  new  LineChart();  
  8   
  9  myLineChart.Line.Color  =  Color.FromName(myColor\[ 0 \]);  
 10   
 11  myLineChart.Fill.Color  =  Color.FromName(myColor\[ 0 \]);  
 12   
 13  myLineChart.LineMarker  =  new  DiamondLineMarker( 8 ,Color.FromName(myColor\[ 0 \]),Color.FromName(myColor\[ 0 \]));  
 14   
 15  myLineChart.DataSource  =  GetData().DefaultView; // GetData()方法见下   
 16    
 17  myLineChart.DataXValueField  =  " mMonth " ;  
 18   
 19  myLineChart.DataYValueField  =  " count " ;  
 20   
 21  myLineChart.DataLabels.Visible  =  true ;  
 22   
 23  myLineChart.Legend  =  " 2011年 " ;  
 24   
 25  myLineChart.DataBind();  
 26   
 27  // myLineChart.Data.Add(new ChartPoint("一",float.Parse("20"))); 此注释部分为添加静态数据  
 28   
 29  // myLineChart.Data.Add(new ChartPoint("二",float.Parse("40")));  
 30   
 31  // myLineChart.Data.Add(new ChartPoint("3", float.Parse("50")));  
 32   
 33  // myLineChart.Data.Add(new ChartPoint("4", float.Parse("30")));  
 34   
 35  // this.ChartControl1.YCustomEnd = 60;  
 36   
 37  // this.ChartControl1.YValuesInterval = 10;   
 38    
 39  this .ChartControl1.Charts.Add(myLineChart);  
 40   
 41  this .ChartControl1.RedrawChart();  
 42   
 43  \}  
 44   
 45   
 46   
 47   
 48   
 49  private  DataTable GetData()  
 50   
 51  \{  
 52   
 53  Class1 c  =  new  Class1();  
 54   
 55  string  sql  =  " select \* from(SELECT 1 AS 'mMonth'UNION SELECT 2 AS 'mMonth'UNION SELECT 3 AS 'mMonth'UNION SELECT 4 AS 'mMonth'UNION SELECT 5 AS 'mMonth'UNION SELECT 6 AS 'mMonth'UNION SELECT 7 AS 'mMonth'UNION SELECT 8 AS 'mMonth'UNION SELECT 9 AS 'mMonth' UNION SELECT 10 AS 'mMonth'UNION SELECT 11 AS 'mMonth'UNION SELECT 12 AS 'mMonth') as m left join(select count(dataTime) as \[count\],month(dataTime) as monthTime from lineChart where year(dataTime)=DATEPART(year, getDate()) group By month(dataTime)) b on m.mMonth = b.monthTime " ;  
 56   
 57  // 此处的sql语句有点……   
 58    
 59  SqlCommand cmd  =  new  SqlCommand(sql, c.Conn);  
 60   
 61  DataSet ds  =  new  DataSet();  
 62   
 63  SqlDataAdapter da  =  new  SqlDataAdapter(cmd);  
 64   
 65  da.Fill(ds);  
 66   
 67  DataTable dt  =  ds.Tables\[ 0 \];  
 68   
 69  return  dt;  
 70   
 71  \}

2、柱状图的代码：

1 private  void  bindchart()  
  2   
  3  \{  
  4   
  5  DataTable dt  =  this .getdt(); // getdt()方法见下   
  6    
  7  if  (dt  !=  null )  
  8   
  9  \{  
  10   
  11  if  (dt.Rows.Count  >  0 )  
  12   
  13  \{  
  14   
  15  // 遍历DataTable为每条记录生成一个柱状    
  16    
  17  for  ( int  i  =  0 ; i  <  dt.Rows.Count; i \++ )  
  18   
  19  \{  
  20   
  21  // 创建对象    
  22    
  23  ColumnChart mychart  =  new  ColumnChart();  
  24   
  25  // 设置柱子宽度    
  26    
  27  mychart.MaxColumnWidth  =  24 ;  
  28   
  29  // 颜色    
  30    
  31  mychart.Fill.Color  =  Color.FromName( this .myColor\[i\]);  
  32   
  33  // 在柱子上显示数量    
  34    
  35  mychart.DataLabels.Visible  =  true ;  
  36   
  37  // 数量的字体    
  38    
  39  mychart.DataLabels.Font  =  new  Font( " Verdana " ,  14 );  
  40   
  41  // dt.Rows\[i\]\["name"\].ToString()  
  42   
  43  // 添加    
  44    
  45  mychart.Data.Add( new  ChartPoint( "" , float .Parse(dt.Rows\[i\]\[ " shuliang " \].ToString())));  
  46   
  47  // 备注   
  48    
  49  mychart.Legend  =  dt.Rows\[i\]\[ " name " \].ToString();  
  50   
  51   
  52   
  53  this .ChartControl2.Charts.Add(mychart);  
  54   
  55  \}  
  56   
  57  // 辅助设置  
  58   
  59  // 背景色    
  60    
  61  ChartControl2.Background.Color  =  Color.FromArgb( 165 ,  0 ,  16 );  
  62   
  63  ChartControl2.YAxisFont.ForeColor  =  Color.FromArgb( 165 ,  0 ,  16 );  
  64   
  65  ChartControl2.XAxisFont.ForeColor  =  Color.FromArgb( 165 ,  0 ,  16 );  
  66   
  67  // 内部线条    
  68    
  69  ChartControl2.Border.Color  =  Color.FromArgb( 200 ,  200 ,  200 );  
  70   
  71  // 边框样式    
  72    
  73  ChartControl2.BorderStyle  =  BorderStyle.None;  
  74   
  75  // y最大值    
  76    
  77  double  max  =  double .Parse(dt.Compute( " MAX(shuliang) " ,  "" ).ToString());  
  78   
  79  // 递增值    
  80    
  81  int  intv  =  2 ;  
  82   
  83   
  84   
  85  // 数量小于16的情况    
  86    
  87  if  (max  <  16 )  
  88   
  89  \{  
  90   
  91  max  =  16 ;  
  92   
  93  \}  
  94   
  95  // 大于16的情况    
  96    
  97  else   
  98   
  99  \{  
 100   
 101  int  intintv  =  int .Parse(Math.Ceiling(max  /  8 ).ToString());  
 102   
 103  max  \+=  intv;  
 104   
 105  \}  
 106   
 107   
 108   
 109  // 设置Y轴终点值  
 110   
 111  // ChartControl2.YCustomEnd = int.Parse(max.ToString());   
 112    
 113  ChartControl2.YCustomEnd  =  50 ;  
 114   
 115  // y递增值    
 116    
 117  ChartControl2.YValuesInterval  =  5 ;  
 118   
 119   
 120   
 121  // 生成    
 122    
 123  this .ChartControl2.RedrawChart();  
 124   
 125  \}  
 126   
 127  \}  
 128   
 129  \}  
 130   
 131   
 132   
 133   
 134   
 135  private  DataTable getdt()  
 136   
 137  \{  
 138   
 139  Class1 c  =  new  Class1();  
 140   
 141  string  sql  =  " select \* from chart " ;  
 142   
 143  SqlCommand cmd  =  new  SqlCommand(sql,c.Conn);  
 144   
 145  DataSet ds  =  new  DataSet();  
 146   
 147  SqlDataAdapter da  =  new  SqlDataAdapter(cmd);  
 148   
 149  da.Fill(ds);  
 150   
 151  DataTable dt  =  ds.Tables\[ 0 \];  
 152   
 153  return  dt;  
 154   
 155  \}  
 156   
 157

3、饼状图的代码：

1 private  void  GetPieChart()  
  2   
  3  \{  
  4   
  5  PieChart c  =  new  PieChart();  
  6   
  7  c.DataSource  =  getdt().DefaultView; // getdt()方法与柱状图为同一个   
  8    
  9  c.DataXValueField  =  " name " ;  
 10   
 11  c.DataYValueField  =  " shuliang " ;  
 12   
 13  c.Shadow.Visible  =  true ;  
 14   
 15  c.DataLabels.ForeColor  =  System.Drawing.Color.Blue;  
 16   
 17  // c.Colors = new Color\[\] \{ Color.Red, Color.Blue, Color.Yellow, Color.Cyan, Color.AntiqueWhite, Color.RosyBrown \};   
 18    
 19  c.DataLabels.Visible  =  true ;  
 20   
 21  ChartControl1.Background.EndPoint  =  new  Point( 500 ,  350 );  
 22   
 23  c.Explosion  =  1 ;  
 24   
 25  c.DataBind();  
 26   
 27  ChartControl3.Charts.Add(c);  
 28   
 29  ChartControl3.RedrawChart();  
 30   
 31  \}  
 32   
 33   
 34   
 35   
 36   
 37  private  DataTable getdt()  
 38   
 39  \{  
 40   
 41  Class1 c  =  new  Class1();  
 42   
 43  string  sql  =  " select \* from chart " ;  
 44   
 45  SqlCommand cmd  =  new  SqlCommand(sql,c.Conn);  
 46   
 47  DataSet ds  =  new  DataSet();  
 48   
 49  SqlDataAdapter da  =  new  SqlDataAdapter(cmd);  
 50   
 51  da.Fill(ds);  
 52   
 53  DataTable dt  =  ds.Tables\[ 0 \];  
 54   
 55  return  dt;  
 56   
 57  \}

来自: [http://hi.baidu.com/shenhui%5F1/blog/item/e1214f631cfbae31aa184c80.html][http_hi.baidu.com_shenhui_5F1_blog_item_e1214f631cfbae31aa184c80.html]

转载于:https://www.cnblogs.com/c3055/articles/2100545.html

[9acd6f8e4612e544c9fc7a5d.jpg]: /images/20211122/247ee5f9069547f293c29541c4e93604.png
[86d5aedb7d808d0ecdbf1a5e.jpg]: /images/20211122/244bcf6ceb3044c59fe81efc268f1ee0.png
[eee48655f0c189348435245f.jpg]: /images/20211122/be12644008b74ec4a8140f69edf202a0.png
[http_hi.baidu.com_shenhui_5F1_blog_item_e1214f631cfbae31aa184c80.html]: http://hi.baidu.com/shenhui_1/blog/item/e1214f631cfbae31aa184c80.html