MSChart实例

MSChart是VS中自带的图表控件，功能比较强大，效果也比较丰富。下面只提供一个例子，以供新接触的朋友参考。

先看下效果图：

看完效果图上代码啦。

使用这个控件需要先在页面注册一下。

1 2	<%@ Register Assembly= "System.Web.DataVisualization, Version=4.0.0.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"      Namespace= "System.Web.UI.DataVisualization.Charting"  TagPrefix= "asp"  %>

如果你是在VS工具箱中直接拖动的，上述注册控件的代码是可以自动生成的。

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32

< div >      < asp:DropDownList  ID = "ddlSelectType"  runat = "server"  AutoPostBack = "true" >          < asp:ListItem  Text = "柱状图"  Value = "Column"  />          < asp:ListItem  Text = "饼图"  Value = "Pie"  />          < asp:ListItem  Text = "折线图"  Value = "Line"  />      </ asp:DropDownList >      < div >          < asp:Chart  ID = "Chart1"  runat = "server"  BorderlineDashStyle = "Solid"  BorderlineColor = "Gray"              Width = "768px"  BackGradientStyle = "DiagonalLeft"  BackSecondaryColor = "AliceBlue"              BackColor = "WhiteSmoke" >              < Legends >                  < asp:Legend  Name = "Lgd"  BackColor = "Transparent"  Docking = "Top"  />              </ Legends >              < Series >                  < asp:Series  Name = "Series1"  IsValueShownAsLabel = "true"  CustomProperties = "DrawingStyle=Cylinder, MinPixelPointWidth=20, MaxPixelPointWidth=35, PointWidth=0.3"                      IsXValueIndexed = "False"  ShadowOffset = "1"  Legend = "Lgd"  ChartArea = "ChartArea1"  />              </ Series >              < ChartAreas >                  < asp:ChartArea  Name = "ChartArea1"  BackColor = "White"  BackSecondaryColor = "Azure"  BackGradientStyle = "DiagonalLeft"                      ShadowOffset = "2" >                      < AxisY >                          < MajorGrid  LineColor = "LightSlateGray"  LineDashStyle = "Dash"  />                      </ AxisY >                      < AxisX >                          < MajorGrid  Enabled = "False"  />                          < LabelStyle  Font = "Microsoft Sans Serif, 8pt"  />                      </ AxisX >                  </ asp:ChartArea >              </ ChartAreas >          </ asp:Chart >      </ div > </ div >

上面在控件内部设置了很多属性，用于控制图表显示的效果。

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54

protected  void  Page_Load( object  sender, EventArgs e) {      if  (!IsPostBack)      {          ChartBind(SeriesChartType.Line);      }      ddlSelectType.SelectedIndexChanged +=  new  EventHandler(ddlSelectType_SelectedIndexChanged); }            /// <summary> /// 准备数据源 /// </summary> /// <returns>数据源</returns> public  DataTable PrepareData() {      DataTable dt =  new  DataTable();      dt.Columns.Add( "subject" ,  typeof ( string ));      dt.Columns.Add( "score" ,  typeof ( float ));      dt.Rows.Add( "数学" , 80);      dt.Rows.Add( "语文" , 89);      dt.Rows.Add( "英语" , 97);      dt.Rows.Add( "物理" , 78);      dt.Rows.Add( "化学" , 76);      return  dt; }            /// <summary> /// 图表绑定 /// </summary> /// <param name="chartType">图表类型</param> public  void  ChartBind(SeriesChartType chartType) {      DataTable dt = PrepareData();      Chart1.Series[ "Series1" ].Points.DataBind(dt.DefaultView,  "subject" ,  "score" ,  "LegendText=subject,YValues=score,ToolTip=subject" );      Chart1.Series[ "Series1" ].ChartType = chartType; //图表类型      Chart1.DataBind(); }            /// <summary> /// 下拉框选择 /// </summary> protected  void  ddlSelectType_SelectedIndexChanged( object  sender, EventArgs e) {      SeriesChartType chartType;      string  value =  this .ddlSelectType.SelectedValue;      switch  (value)      {          case  "Column" : chartType = SeriesChartType.Column;  break ; //柱状图          case  "Pie" : chartType = SeriesChartType.Pie;  break ; //饼图          case  "Line" : chartType = SeriesChartType.Line;  break ; //折线图          default : chartType = SeriesChartType.Column;  break ;      }      ChartBind(chartType); }

值得一提的是，只要指定了图表类别，绑定的代码共用一套，即可显示不同的图表效果。

本文转自 guwei4037  51CTO博客，原文链接:http://blog.51cto.com/csharper/1345242