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

最新推荐文章于 2025-05-15 16:23:17 发布

fengjiexyb

最新推荐文章于 2025-05-15 16:23:17 发布

阅读量1.4k

点赞数

分类专栏： .NET

.NET 专栏收录该内容

50 篇文章

订阅专栏

本文介绍了如何使用ASP.NET图表控件创建柱形图、拆线图和饼图，包括详细HTML代码和后台实现方式。通过调整样式和配置参数，轻松实现数据可视化。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

http://www.jq-school.com/Show.aspx?id=311

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

效果图：

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;