热门关键字:
jquery > jquery教程 > .net > asp.net使用chart控件简单制作柱状体、饼图总结

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

32764
作者:管理员
发布时间:2013/8/12 19:40:40
评论数:1
转载请自觉注明原文:http://www.jq-school.com/Show.aspx?id=311

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

效果图:

ASP.Net chart控件简单制作柱状体、饼图总结ASP.Net chart控件简单制作柱状体、饼图总结ASP.Net chart控件简单制作柱状体、饼图总结


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插件 数据统计控件 饼状图控件 柱形图控件
友荐云推荐