asp.net使用chart控件简单制作柱状体、饼图总结

 

asp.net使用chart控件简单制作柱状体、饼图总结

1、  柱状图

 


前台代码：

<!--柱状图-->

  <div class="quickGuess_content Guess_hide"style="text-align: center;">

      <asp:Chart ID="ChartCol" runat="server"Width="800px" BackColor="#FFFFCC"Palette="BrightPastel" BorderWidth="2" BorderColor="#cc9900">

         <Series>

           <asp:Series Name="Series1"></asp:Series>

         </Series>

          <ChartAreas>

           <asp:ChartArea Name="ChartArea1"></asp:ChartArea>

          </ChartAreas>

       </asp:Chart>

</div>

 

后台代码;

public void chart_col()

    {

       MySqlConnection conn = con();

       conn.Open();

       MySqlDataAdapter da = new MySqlDataAdapter(mysqlstr, conn);

       DataSet ds = new DataSet();

       da.Fill(ds, "sells");

       DataTable dt = ds.Tables[0];

       //获取颜色数组

       int N = 10;

       //N = ds.Tables.Count;

       string[] arrcolorname = new string
;

       for (int i = 0; i < N; i++)

       {

           arrcolorname[i] = ds.Tables[0].Rows[i][0].ToString();

       }

 

        //获取各种颜色的数量

       int[] arrsellnum = new int
;

       for (int i = 0; i < N; i++)

       {

           arrsellnum[i] = Convert.ToInt32(ds.Tables[0].Rows[i][1].ToString());

       }

       //柱状图成员

       Series seriescol = new Series("销售情况");

        seriescol.ChartType =SeriesChartType.Column;

       seriescol.BorderWidth = 3;

       seriescol.ShadowOffset = 2;

       //seriescol.XValueMember = "colorName";

       //seriescol.YValueMembers = "sum(A.sellnum)";

       

       this.ChartCol.Series.Add(seriescol);

 

       Title tcol = new Title("销售情况柱状图(颜色)");

       this.ChartCol.Titles.Add(tcol);

       

       this.ChartCol.ChartAreas["ChartArea1"].AxisX.IsMarginVisible =false;

       this.ChartCol.ChartAreas["ChartArea1"].Area3DStyle.Enable3D =false;

       //背景色设置

       this.ChartCol.ChartAreas["ChartArea1"].ShadowColor =Color.Transparent;

       this.ChartCol.ChartAreas["ChartArea1"].BackColor =Color.Azure;

       this.ChartCol.ChartAreas["ChartArea1"].BackGradientStyle =GradientStyle.TopBottom;

       this.ChartCol.ChartAreas["ChartArea1"].BackSecondaryColor =Color.White;

       //X,Y坐标线颜色和大小

       this.ChartCol.ChartAreas["ChartArea1"].AxisX.LineColor =Color.Blue;

       this.ChartCol.ChartAreas["ChartArea1"].AxisY.LineColor =Color.Blue;

       this.ChartCol.ChartAreas["ChartArea1"].AxisX.LineWidth = 2;

       this.ChartCol.ChartAreas["ChartArea1"].AxisY.LineWidth = 2;

       this.ChartCol.ChartAreas["ChartArea1"].AxisY.Title = "销量";

        //中间X,Y线条的颜色设置

       this.ChartCol.ChartAreas["ChartArea1"].AxisX.MajorGrid.LineColor= Color.Blue;

       this.ChartCol.ChartAreas["ChartArea1"].AxisY.MajorGrid.LineColor= Color.Blue;

       //X.Y轴数据显示间隔

       this.ChartCol.ChartAreas["ChartArea1"].AxisX.Interval =1;  //X轴数据显示间隔

       this.ChartCol.ChartAreas["ChartArea1"].AxisY.Interval = 500;

       //X轴线条显示间隔

       this.ChartCol.ChartAreas["ChartArea1"].AxisX.MajorGrid.Interval= 1;

       //顶端显示数据

       this.ChartCol.ChartAreas[0].AxisX.Interval = 1;

       this.ChartCol.ChartAreas[0].AxisX.IntervalOffset = 1;

       this.ChartCol.ChartAreas[0].AxisX.LabelStyle.IsStaggered = true;

 

       this.ChartCol.Series.Add("实际值");

       this.ChartCol.Series["实际值"]["PixelPointWidth"] = "30";

       //this.ChartCol.Series["实际值"].Points[0].Label = "1";

       this.ChartCol.Series["实际值"].Points.DataBindXY(arrcolorname, arrsellnum);

       for (int i = 0; i < N; i++)

       {

           this.ChartCol.Series["实际值"].Points[i].Label = arrsellnum[i].ToString(); ;

       }

 

    }

 

 

2、  折线图

只需要增加Series以及Series的图标类型（Series.ChartType =SeriesChartType.Line）和数据源即可。

 


3、饼状图

html代码如下：

 

<asp:Chart ID="Chart2"runat="server" ImageType="Jpeg"ChartDashStyle="solid"

Height="322px"Width="440px" onclick="Chart2_Click">

   <Legends>

       <asp:Legend Name="Legend1" >

       </asp:Legend>

   </Legends>

   <Series>

   </Series>

   <ChartAreas>

       <asp:ChartArea Name="ChartArea1">

       </asp:ChartArea>

   </ChartAreas>

   <Titles>

       <asp:Title Name="Title1">

       </asp:Title>

   </Titles>

</asp:Chart>

后台代码如下：

 

 

/// <summary>

/// 2013年5月22日修改并添加说明

/// ToolTip：鼠标放在图标上显示数据（#VALX：指标名称，#VALY指标值）

/// LegendToolTip：鼠标放在图例上显示数据（#PERCENT：百分比）

/// PostBackValue：返回值（#INDEX：索引值）

/// LegendPostBackValue：图例返回值

/// LegendText：图例值

/// Label：饼图值

/// </summary>

string createdate =StringHelper.GetCurrentDate("yyyy-MM-dd");

string date =StringHelper.AddDate("d", -1, createdate,"yyyy-MM-dd");     

//string date = "2013-01-08";

Series series = Chart2.Series.Add("MySeries");

series.ToolTip = "#VALX:#VALY 万千瓦时";

series.LegendToolTip ="#PERCENT";

series.PostBackValue = "#INDEX";

series.LegendPostBackValue ="#INDEX";

series.LegendText= "#VALX";

series.Label = "#VALX[#PERCENT]";

series.Points.DataBindXY(list1, list2);

Chart2.Series[0]["PieLabelStyle"]= "Outside";//饼图说明显示方式（外面）

series.ChartType = SeriesChartType.Pie; //图标的显示风格（饼图）

series.ShadowOffset = 2;

series.BorderColor = Color.DarkGray;

Chart2.Width = 880;

Chart2.Height = 400;