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

作者：管理员

发布时间：2013/8/12 19:40:40

评论数：1

转载请自觉注明原文：http://www.jq-school.com/Show.aspx?id=311

本文章由jquery学堂2群的网友【北京-web-小虾米】整理分享,非常感谢！

效果图：

1、柱形图：

html代码如下 ：

<asp:Chart ID="Chart1" runat="server" ImageType="Jpeg" ChartDashStyle="solid" 
Height="320px" style="margin-bottom: 0px" Width="614px">
<Legends>
 <asp:Legend Name="Legend1" >
  </asp:Legend>
  </Legends>
  <Series>    
  </Series>
  <ChartAreas>
<asp:ChartArea Name="ChartArea1">
<AxisX>
	<MajorTickMark Enabled="False" LineColor="White" LineDashStyle="NotSet" />
	<MajorGrid Enabled="false" />
	<MinorTickMark LineColor="White" />
</AxisX>
<AxisY>
	<MajorTickMark LineColor="White" />
	<MajorGrid Enabled="False" />
	<MinorTickMark LineColor="White" />
</AxisY>
</asp:ChartArea>
</ChartAreas>
<Titles>
	<asp:Title Name="Title1">
	</asp:Title>
</Titles>
</asp:Chart>

后台代码如下：

Chart1.Height = 400;
Chart1.Width =1200;
//title属性说明
//边框样式设置
Chart1.ChartAreas["ChartArea1"].BorderColor = Color.Black;
Chart1.ChartAreas["ChartArea1"].BorderWidth = 2;
Chart1.ChartAreas[0].AxisX.Interval = 1;
Chart1.ChartAreas[0].AxisX.IntervalOffset = 1;
Chart1.ChartAreas[0].AxisX.LabelStyle.IsStaggered = true;

Chart1.Series.Add("实际值");
Chart1.Series["实际值"]["PixelPointWidth"] = "20";
Chart1.Series["实际值"].Points.DataBindXY(list1, list2); //添加数据源，X、Y轴（结合这里是动态数组）
for (int i = 0; i < list1.Count; i++)
{
	Chart1.Series["实际值"].Points[i].Label = list2[i].ToString();//柱状图顶部添加说明数据
}

//设置图例说明
Chart1.ChartAreas["ChartArea1"].AxisY.TitleFont = new Font("微软雅黑", float.Parse("8"), FontStyle.Regular);
Chart1.ChartAreas["ChartArea1"].AxisY.TitleForeColor = Color.FromName("Black");
Chart1.ChartAreas["ChartArea1"].AxisY.Title = "单位;" + "万千瓦时";
Chart1.ChartAreas["ChartArea1"].AxisX.TitleFont = new Font("微软雅黑", float.Parse("8"), FontStyle.Regular);
Chart1.ChartAreas["ChartArea1"].AxisX.TitleForeColor = Color.FromName("Black");
Chart1.ChartAreas["ChartArea1"].AxisX.Title = date + "发电量";

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("My Series");
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;         

关键字：asp.net C# chart插件 数据统计控件 饼状图控件 柱形图控件