C#chart控件绘制折线图、柱状图、饼图、雷达图

原创已于 2025-08-12 19:03:53 修改 · 1.6w 阅读

145 ·

CC 4.0 BY-SA版权

文章标签：

#c# #开发语言

于 2019-06-06 11:56:48 首次发布

C#语言专栏收录该内容

67 篇文章

订阅专栏

本文详细介绍了在.NET环境中使用微软图表控件的方法，包括图表基本元素、创建图表步骤、添加数据、图例、标题及注解等。通过实践示例，展示了如何配置不同图表类型及其属性，适用于初学者和进阶用户。

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

转载来源：https://blog.csdn.net/u011854789/article/details/82946553

参考链接：
http://www.cnblogs.com/winshe/articles/6604406.html
https://blog.csdn.net/akof1314/article/details/5710866
http://www.360doc.com/content/13/1016/10/9981262_321805184.shtml

在.NET环境下微软提供了强大了图表控件，并给多了很多实例，关于图表的基本元素如下：
在这里插入图片描述

并且MSDN给出了创建图表的示例步骤，原文地址：http://msdn.microsoft.com/en-us/library/dd489237.aspx

在这里，我仅作为自己理解的，并实践的，以中文方式写出步骤，未免出错，还请参照MSDN。添加一个图表控件到应用程序：

1，在设计视图下，打开“工具箱
”；
2，在“Data
”分类下，拖动一个图表控件到设计区域；
3，在其属性中展开“ChartAreas
”子属性，弹出的“ChartAreas 集合编辑器
”中，这里包含了当前图表控件的所有图表区，并且注意此时此集合器已经包含了一个图表区，名称为"ChartArea1
"；
4，点击“添加
”，新增一个图表区，请注意，在设计区域的图表缩小到原来的一半大小。这是因为新创建的图表区是放置在底部，但不包含一个数据系列；
5，在图表控件的“Series
”子属性，展开弹出“Series 集合编辑器
”，注意这里已经包含了一个序列，名称为”Series1
“；
6，点击”添加
“，新增一个序列，在其右边设置其属性，“ChartArea
”属性为ChartArea2
，“ChartType
”属性为Bar
，“Name
”属性为BarChart
，点击“确定
”完成。此时运行程序未出现任何结果，因为还没有数据；
添加数据到图表：

1，打开“Series 集合编辑器
”，在左边的”成员“中选择”Series1
“，在右边的属性区域点击展开”Points
“，弹出”DataPoint 集合编辑器
“；
2，点击”添加
“，在其右边属性的”YValues
“属性中输入值，重复这一步知道添加了5个数据点；
3，点击”确定
“，然后对”BarChart
“序列进行与第2步一样的操作；
4，”确定
“完成，运行程序可以在图表控件上看到两个图表区，显示着刚刚创建的两个序列的数据点。请注意这两个序列的不同图表类型。
添加图例到图表：

1，在图表控件属性中，点击”Legends
“，展开”Legend 集合编辑器
“，如果没有已存在的一个图例，那么就添加一个；
2，设置这个图例属性，其中”DockedToChartArea
“值为”ChartArea1
“，”Docking
“值为”Right
“，”IsDockedInsideChartArea
“值为”False
“；
3，再添加一个图例，设置属性其中”DockedToChartArea
“值为”ChartArea2
“，”Docking
“值为”Right
“；
4，点击”确定
“完成。此时图表区域的第二个图例显示为空。默认所有的序列都分配到第一个图例，你也可以分配每个序列到不同的图例；
5，打开”Series 集合编辑器
”，选择“BarChart
”项，在其“Legend
”属性中下拉列表选择“Legend2
”，完成运行程序。
添加标题到图表：

1，在图表控件属性中，点击“Titles
”，展开“Title 集合编辑器
”，点击“添加
”，在右边的属性“Text
”中输入图表的标题；
2，点击“确定
”，运行程序看效果。
使用注解标记图表上的数据点：

1，在图表控件属性中，点击“Annotations
”，展开“Annotation 集合编辑器
”；
2，点击“添加
”的下拉列表，选择“ArrowAnnotation
”，如图：
在这里插入图片描述
3，在右边的属性“定位点
”分类下，下列选择“AnchorDataPoint
”值为第一个序列的第一个数据点；
4，其具体属性“Height
”值为-5，“Width
”值为0，“AnchorOffSetY
”值为-2.5；
5，在其属性“杂项
”展开“SmartLabelStyle
”子属性，设置“IsOverlappedHidden
”为”False“；
6，点击”确定
“，运行程序。
程序效果如图：
在这里插入图片描述

在这里插入图片描述
最近公司项目要用到Chart图表控件，这是一个比较老的东西了，目前网络上似乎已经不太流行这个控件，但是只要配置了相关的属性，效果还是可以的。前前后后摸索了好久，接下来谈谈这个件控件最重要的几个属性。

1.ChartAreas属性

ChartAreas属性指绘图区，一个控件可以有多个绘图区，比如我要在同一个控件内显示饼图和柱状图，肯定不能放在同一个ChartAreas区域内，应该在同一个Chart控件里增加两个ChartAreas并分别绑定Series对象。所以ChartAreas属性对应的是一个集合。
1
2.Series属性

Series属性就是各种图表的图形啦，比如我们要显示某月的天气变化，那么应该有这样两组数据，一组是天数，一组是每天对应的温度值，同时绑定到Series对象中，再将Series对象Add()到Chart控件的Series属性里即可。为了横向比较，例如我要看本月与上月的天气曲线变化图，并同时显示在同一个ChartAreas中，那该怎么办呢？很简单，再实例一个Series对象，将上月的天数数组与温度值数组绑定到一个新的Series2实例中，再将Series2实例Add()到Chart控件的Series属性里，此时，Chart控件的第一个绘图区ChartArea里就会有两条曲线。
1
3.Legends属性

Legend就是指一个图标的图例，当一个Series属性有多个Series时，或是一个Series有几组数据时，为了区分各自的颜色，通常每个Serie对象一种颜色，这就需要用到图例来指明哪个颜色的代表的是什么数据。如下图所示：
1
在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

4.关于数据的绑定
将要显示的X轴和Y轴的数据分别放到两个数组里在，然后绑定即可。
cht1.Series[0].Points.DataBindXY(x, y);

完整的代码如下：
复制代码
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Drawing;
using System.Web.UI.DataVisualization.Charting;

public partial class _Default : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
string[] x = new string[] { “南山大队”, “福田大队”, “罗湖大队”, “宝安大队”, “指挥处”, “大帝科技”, “南山大队”, “福田大队”, “罗湖大队”, “宝安大队”, “指挥处”, “大帝科技”};
double[] y = new double[] { 541, 574, 345, 854, 684, 257, 541, 574, 345, 854, 684, 257 };
string[] z = new string[] { “”, “”, “”, “”, “”, “”, “”, “”, “”, “”, “”, “” };

string[] a = new string[] { "南山大队", "福田大队", "罗湖大队", "宝安大队", "指挥处", };
double[] b = new double[] { 541, 574, 345, 854, 257 };

#region 柱状图

//标题
cht1.Titles.Add("柱状图数据分析");        
cht1.Titles[0].ForeColor = Color.White;
cht1.Titles[0].Font = new Font("微软雅黑", 12f, FontStyle.Regular);
cht1.Titles[0].Alignment = ContentAlignment.TopCenter;
cht1.Titles.Add("合计：25414 宗");
cht1.Titles[1].ForeColor = Color.White;
cht1.Titles[1].Font = new Font("微软雅黑", 8f, FontStyle.Regular);
cht1.Titles[1].Alignment = ContentAlignment.TopRight;

//控件背景
cht1.BackColor = Color.Transparent;
//图表区背景
cht1.ChartAreas[0].BackColor = Color.Transparent;
cht1.ChartAreas[0].BorderColor = Color.Transparent;
//X轴标签间距
cht1.ChartAreas[0].AxisX.Interval = 1;
cht1.ChartAreas[0].AxisX.LabelStyle.IsStaggered = true;
cht1.ChartAreas[0].AxisX.LabelStyle.Angle = -45;
cht1.ChartAreas[0].AxisX.TitleFont = new Font("微软雅黑", 14f, FontStyle.Regular);
cht1.ChartAreas[0].AxisX.TitleForeColor = Color.White;

//X坐标轴颜色
cht1.ChartAreas[0].AxisX.LineColor = ColorTranslator.FromHtml("#38587a"); ;
cht1.ChartAreas[0].AxisX.LabelStyle.ForeColor = Color.White;
cht1.ChartAreas[0].AxisX.LabelStyle.Font = new Font("微软雅黑", 10f, FontStyle.Regular);
//X坐标轴标题
//cht1.ChartAreas[0].AxisX.Title = "数量(宗)";
//cht1.ChartAreas[0].AxisX.TitleFont = new Font("微软雅黑", 10f, FontStyle.Regular);
//cht1.ChartAreas[0].AxisX.TitleForeColor = Color.White;
//cht1.ChartAreas[0].AxisX.TextOrientation = TextOrientation.Horizontal;
//cht1.ChartAreas[0].AxisX.ToolTip = "数量(宗)";
//X轴网络线条
cht1.ChartAreas[0].AxisX.MajorGrid.Enabled = true;
cht1.ChartAreas[0].AxisX.MajorGrid.LineColor = ColorTranslator.FromHtml("#2c4c6d");

//Y坐标轴颜色
cht1.ChartAreas[0].AxisY.LineColor = ColorTranslator.FromHtml("#38587a"); 
cht1.ChartAreas[0].AxisY.LabelStyle.ForeColor = Color.White;  
cht1.ChartAreas[0].AxisY.LabelStyle.Font = new Font("微软雅黑", 10f, FontStyle.Regular);
//Y坐标轴标题
cht1.ChartAreas[0].AxisY.Title = "数量(宗)";
cht1.ChartAreas[0].AxisY.TitleFont = new Font("微软雅黑", 10f, FontStyle.Regular);
cht1.ChartAreas[0].AxisY.TitleForeColor = Color.White;
cht1.ChartAreas[0].AxisY.TextOrientation = TextOrientation.Rotated270;
cht1.ChartAreas[0].AxisY.ToolTip = "数量(宗)";
//Y轴网格线条
cht1.ChartAreas[0].AxisY.MajorGrid.Enabled = true;
cht1.ChartAreas[0].AxisY.MajorGrid.LineColor = ColorTranslator.FromHtml("#2c4c6d");

cht1.ChartAreas[0].AxisY2.LineColor = Color.Transparent;
cht1.ChartAreas[0].BackGradientStyle = GradientStyle.TopBottom;
Legend legend = new Legend("legend");
legend.Title = "legendTitle";

cht1.Series[0].XValueType = ChartValueType.String;  //设置X轴上的值类型
cht1.Series[0].Label = "#VAL";                //设置显示X Y的值    
cht1.Series[0].LabelForeColor = Color.White;
cht1.Series[0].ToolTip = "#VALX:#VAL";     //鼠标移动到对应点显示数值
cht1.Series[0].ChartType = SeriesChartType.Column;    //图类型(折线)


cht1.Series[0].Color = Color.Lime;
cht1.Series[0].LegendText = legend.Name;
cht1.Series[0].IsValueShownAsLabel = true;
cht1.Series[0].LabelForeColor = Color.White;
cht1.Series[0].CustomProperties = "DrawingStyle = Cylinder";
cht1.Legends.Add(legend);
cht1.Legends[0].Position.Auto = false;


//绑定数据
cht1.Series[0].Points.DataBindXY(x, y);
cht1.Series[0].Points[0].Color = Color.White;
cht1.Series[0].Palette = ChartColorPalette.Bright;

#endregion

#region 饼图

//标题
cht2.Titles.Add("饼图数据分析");
cht2.Titles[0].ForeColor = Color.White;
cht2.Titles[0].Font = new Font("微软雅黑", 12f, FontStyle.Regular);
cht2.Titles[0].Alignment = ContentAlignment.TopCenter;
cht2.Titles.Add("合计：25412 宗");
cht2.Titles[1].ForeColor = Color.White;
cht2.Titles[1].Font = new Font("微软雅黑", 8f, FontStyle.Regular);
cht2.Titles[1].Alignment = ContentAlignment.TopRight;

//控件背景
cht2.BackColor = Color.Transparent;
//图表区背景
cht2.ChartAreas[0].BackColor = Color.Transparent;
cht2.ChartAreas[0].BorderColor = Color.Transparent;
//X轴标签间距
cht2.ChartAreas[0].AxisX.Interval = 1;
cht2.ChartAreas[0].AxisX.LabelStyle.IsStaggered = true;
cht2.ChartAreas[0].AxisX.LabelStyle.Angle = -45;
cht2.ChartAreas[0].AxisX.TitleFont = new Font("微软雅黑", 14f, FontStyle.Regular);
cht2.ChartAreas[0].AxisX.TitleForeColor = Color.White;

//X坐标轴颜色
cht2.ChartAreas[0].AxisX.LineColor = ColorTranslator.FromHtml("#38587a"); ;
cht2.ChartAreas[0].AxisX.LabelStyle.ForeColor = Color.White;
cht2.ChartAreas[0].AxisX.LabelStyle.Font = new Font("微软雅黑", 10f, FontStyle.Regular);
//X坐标轴标题
cht2.ChartAreas[0].AxisX.Title = "数量(宗)";
cht2.ChartAreas[0].AxisX.TitleFont = new Font("微软雅黑", 10f, FontStyle.Regular);
cht2.ChartAreas[0].AxisX.TitleForeColor = Color.White;
cht2.ChartAreas[0].AxisX.TextOrientation = TextOrientation.Horizontal;
cht2.ChartAreas[0].AxisX.ToolTip = "数量(宗)";
//X轴网络线条
cht2.ChartAreas[0].AxisX.MajorGrid.Enabled = true;
cht2.ChartAreas[0].AxisX.MajorGrid.LineColor = ColorTranslator.FromHtml("#2c4c6d");

//Y坐标轴颜色
cht2.ChartAreas[0].AxisY.LineColor = ColorTranslator.FromHtml("#38587a");
cht2.ChartAreas[0].AxisY.LabelStyle.ForeColor = Color.White;
cht2.ChartAreas[0].AxisY.LabelStyle.Font = new Font("微软雅黑", 10f, FontStyle.Regular);
//Y坐标轴标题
cht2.ChartAreas[0].AxisY.Title = "数量(宗)";
cht2.ChartAreas[0].AxisY.TitleFont = new Font("微软雅黑", 10f, FontStyle.Regular);
cht2.ChartAreas[0].AxisY.TitleForeColor = Color.White;
cht2.ChartAreas[0].AxisY.TextOrientation = TextOrientation.Rotated270;
cht2.ChartAreas[0].AxisY.ToolTip = "数量(宗)";
//Y轴网格线条
cht2.ChartAreas[0].AxisY.MajorGrid.Enabled = true;
cht2.ChartAreas[0].AxisY.MajorGrid.LineColor = ColorTranslator.FromHtml("#2c4c6d");

cht2.ChartAreas[0].AxisY2.LineColor = Color.Transparent;

//背景渐变
cht2.ChartAreas[0].BackGradientStyle = GradientStyle.None;

//图例样式
Legend legend2 = new Legend("#VALX");
legend2.Title = "图例";
legend2.TitleBackColor = Color.Transparent;
legend2.BackColor = Color.Transparent;
legend2.TitleForeColor = Color.White;
legend2.TitleFont = new Font("微软雅黑", 10f, FontStyle.Regular);
legend2.Font = new Font("微软雅黑", 8f, FontStyle.Regular);
legend2.ForeColor = Color.White;       

cht2.Series[0].XValueType = ChartValueType.String;  //设置X轴上的值类型
cht2.Series[0].Label = "#VAL";                //设置显示X Y的值    
cht2.Series[0].LabelForeColor = Color.White;
cht2.Series[0].ToolTip = "#VALX:#VAL(宗)";     //鼠标移动到对应点显示数值
cht2.Series[0].ChartType = SeriesChartType.Pie;    //图类型(折线)

cht2.Series[0].Color = Color.Lime;
cht2.Series[0].LegendText = legend2.Name;
cht2.Series[0].IsValueShownAsLabel = true;
cht2.Series[0].LabelForeColor = Color.White;
cht2.Series[0].CustomProperties = "DrawingStyle = Cylinder";
cht2.Series[0].CustomProperties = "PieLabelStyle = Outside";
cht2.Legends.Add(legend2);
cht2.Legends[0].Position.Auto = true;
cht2.Series[0].IsValueShownAsLabel = true;
//是否显示图例
cht2.Series[0].IsVisibleInLegend = true;
cht2.Series[0].ShadowOffset = 0;

//饼图折线
cht2.Series[0]["PieLineColor"] = "White";     
//绑定数据
cht2.Series[0].Points.DataBindXY(x, y);
cht2.Series[0].Points[0].Color = Color.White;
//绑定颜色
cht2.Series[0].Palette = ChartColorPalette.BrightPastel;





#endregion

#region Bar图

//标题
cht3.Titles.Add("交通违法行为TOP5");
cht3.Titles[0].ForeColor = Color.White;
cht3.Titles[0].Font = new Font("微软雅黑", 12f, FontStyle.Regular);
cht3.Titles[0].Alignment = ContentAlignment.TopCenter;
cht3.Titles.Add("合计：25412 宗 ");
cht3.Titles[1].ForeColor = Color.White;
cht3.Titles[1].Font = new Font("微软雅黑", 8f, FontStyle.Regular);
cht3.Titles[1].Alignment = ContentAlignment.TopRight;

//控件背景
cht3.BackColor = Color.Transparent;
//图表区背景
cht3.ChartAreas[0].BackColor = Color.Transparent;
cht3.ChartAreas[0].BorderColor = Color.Transparent;
//X轴标签间距
cht3.ChartAreas[0].AxisX.Interval = 1;
cht3.ChartAreas[0].AxisX.LabelStyle.IsStaggered = true;
cht3.ChartAreas[0].AxisX.LabelStyle.Angle = -45;
cht3.ChartAreas[0].AxisX.TitleFont = new Font("微软雅黑", 14f, FontStyle.Regular);
cht3.ChartAreas[0].AxisX.TitleForeColor = Color.White;

//X坐标轴颜色
cht3.ChartAreas[0].AxisX.LineColor = ColorTranslator.FromHtml("#38587a"); ;
cht3.ChartAreas[0].AxisX.LabelStyle.ForeColor = Color.White;
cht3.ChartAreas[0].AxisX.LabelStyle.Font = new Font("微软雅黑", 10f, FontStyle.Regular);
//X坐标轴标题
//cht3.ChartAreas[0].AxisX.Title = "数量(宗)";
//cht3.ChartAreas[0].AxisX.TitleFont = new Font("微软雅黑", 10f, FontStyle.Regular);
//cht3.ChartAreas[0].AxisX.TitleForeColor = Color.White;
//cht3.ChartAreas[0].AxisX.TextOrientation = TextOrientation.Auto;
//cht3.ChartAreas[0].AxisX.ToolTip = "数量(宗)";
//X轴网络线条
cht3.ChartAreas[0].AxisX.MajorGrid.Enabled = true;
cht3.ChartAreas[0].AxisX.MajorGrid.LineColor = ColorTranslator.FromHtml("#2c4c6d");

//Y坐标轴颜色
cht3.ChartAreas[0].AxisY.LineColor = ColorTranslator.FromHtml("#38587a");
cht3.ChartAreas[0].AxisY.LabelStyle.ForeColor = Color.White;
cht3.ChartAreas[0].AxisY.LabelStyle.Font = new Font("微软雅黑", 10f, FontStyle.Regular);
//Y坐标轴标题
//cht3.ChartAreas[0].AxisY.Title = "数量(宗)";
//cht3.ChartAreas[0].AxisY.TitleFont = new Font("微软雅黑", 10f, FontStyle.Regular);
//cht3.ChartAreas[0].AxisY.TitleForeColor = Color.White;
//cht3.ChartAreas[0].AxisY.TextOrientation = TextOrientation.Auto;
//cht3.ChartAreas[0].AxisY.ToolTip = "数量(宗)";
//Y轴网格线条
cht3.ChartAreas[0].AxisY.MajorGrid.Enabled = true;
cht3.ChartAreas[0].AxisY.MajorGrid.LineColor = ColorTranslator.FromHtml("#2c4c6d");

cht3.ChartAreas[0].AxisY2.LineColor = Color.Transparent;
cht3.ChartAreas[0].AxisX.IsMarginVisible = false;
cht3.ChartAreas[0].Area3DStyle.Enable3D = true;
//背景渐变
cht2.ChartAreas[0].BackGradientStyle = GradientStyle.None;

//图例样式
Legend legend3 = new Legend("#VALX");
legend3.Title = "图例";
legend3.TitleBackColor = Color.Transparent;
legend3.BackColor = Color.Transparent;
legend3.TitleForeColor = Color.White;
legend3.TitleFont = new Font("微软雅黑", 10f, FontStyle.Regular);
legend3.Font = new Font("微软雅黑", 8f, FontStyle.Regular);
legend3.ForeColor = Color.White;

cht3.Series[0].XValueType = ChartValueType.String;  //设置X轴上的值类型
cht3.Series[0].Label = "#VAL";                //设置显示X Y的值    
cht3.Series[0].LabelForeColor = Color.White;
cht3.Series[0].ToolTip = "#VALX:#VAL(宗)";     //鼠标移动到对应点显示数值
cht3.Series[0].ChartType = SeriesChartType.Bar;    //图类型(折线)

cht3.Series[0].Color = Color.Lime;
//cht3.Series[0].LegendText = legend3.Name;
cht3.Series[0].IsValueShownAsLabel = true;
cht3.Series[0].LabelForeColor = Color.White;
cht3.Series[0].CustomProperties = "DrawingStyle = Cylinder";
cht3.Series[0].CustomProperties = "PieLabelStyle = Outside";
//cht3.Legends.Add(legend3);
//cht3.Legends[0].Position.Auto = true;

//是否显示图例
cht3.Series[0].IsVisibleInLegend = true;
cht3.Series[0].ShadowOffset = 0;

//饼图折线
cht3.Series[0]["PieLineColor"] = "White";
//绑定数据
cht3.Series[0].Points.DataBindXY(a, b);

//cht3.Series[0].Points[0].Color = Color.White;
//绑定颜色
cht3.Series[0].Palette = ChartColorPalette.BrightPastel;

//for (int n = 0; n < x.Length; n++)
//{
//    int ptIdx = cht3.Series[0].Points.AddY(Convert.ToDouble(y[n]));
//    DataPoint pt = this.cht3.Series[0].Points[ptIdx];
//    pt.LegendText = x[n] + " " + "#PERCENT{P2}" + " [ " + "#VAL{D} 次" + " ]";//右边标签列显示的文字  
//    pt.Label = x[n] + " " + "#PERCENT{P2}" + " [ " + "#VAL{D} 次" + " ]"; //圆饼外显示的信息 

//    //  pt.LabelToolTip = "#PERCENT{P2}";  
//    //pt.LabelBorderColor = Color.Red;//文字背景色   
//}





#endregion


#region 雷达图

// //标题
cht4.Titles.Add(“交通违法行为TOP5”);
cht4.Titles[0].ForeColor = Color.White;
cht4.Titles[0].Font = new Font(“微软雅黑”, 12f, FontStyle.Regular);
cht4.Titles[0].Alignment = ContentAlignment.TopCenter;
cht4.Titles.Add("合计：25412 宗 ");
cht4.Titles[1].ForeColor = Color.White;
cht4.Titles[1].Font = new Font(“微软雅黑”, 8f, FontStyle.Regular);
cht4.Titles[1].Alignment = ContentAlignment.TopRight;

//控件背景
cht4.BackColor = Color.Transparent;
cht4.ChartAreas[0].BackColor = Color.Transparent;
cht4.ChartAreas[0].BorderColor = Color.Transparent;
//X轴标签间距
cht4.ChartAreas[0].AxisX.Interval = 1;
cht4.ChartAreas[0].AxisX.LabelStyle.IsStaggered = true;
cht4.ChartAreas[0].AxisX.LabelStyle.Angle = -45;
cht4.ChartAreas[0].AxisX.TitleFont = new Font("微软雅黑", 14f, FontStyle.Regular);
cht4.ChartAreas[0].AxisX.TitleForeColor = Color.White;

//X坐标轴颜色
cht4.ChartAreas[0].AxisX.LineColor = ColorTranslator.FromHtml("#38587a"); ;
cht4.ChartAreas[0].AxisX.LabelStyle.ForeColor = Color.White;
cht4.ChartAreas[0].AxisX.LabelStyle.Font = new Font("微软雅黑", 10f, FontStyle.Regular);
//X坐标轴标题
//cht4.ChartAreas[0].AxisX.Title = "数量(宗)";
//cht4.ChartAreas[0].AxisX.TitleFont = new Font("微软雅黑", 10f, FontStyle.Regular);
//cht4.ChartAreas[0].AxisX.TitleForeColor = Color.White;
//cht4.ChartAreas[0].AxisX.TextOrientation = TextOrientation.Auto;
//cht4.ChartAreas[0].AxisX.ToolTip = "数量(宗)";
//X轴网络线条
cht4.ChartAreas[0].AxisX.MajorGrid.Enabled = true;
cht4.ChartAreas[0].AxisX.MajorGrid.LineColor = ColorTranslator.FromHtml("#2c4c6d");

//Y坐标轴颜色
cht4.ChartAreas[0].AxisY.LineColor = ColorTranslator.FromHtml("#38587a");
cht4.ChartAreas[0].AxisY.LabelStyle.ForeColor = Color.White;
cht4.ChartAreas[0].AxisY.LabelStyle.Font = new Font("微软雅黑", 10f, FontStyle.Regular);
//Y坐标轴标题
//cht4.ChartAreas[0].AxisY.Title = "数量(宗)";
//cht4.ChartAreas[0].AxisY.TitleFont = new Font("微软雅黑", 10f, FontStyle.Regular);
//cht4.ChartAreas[0].AxisY.TitleForeColor = Color.White;
//cht4.ChartAreas[0].AxisY.TextOrientation = TextOrientation.Auto;
//cht4.ChartAreas[0].AxisY.ToolTip = "数量(宗)";
//Y轴网格线条
cht4.ChartAreas[0].AxisY.MajorGrid.Enabled = true;
cht4.ChartAreas[0].AxisY.MajorGrid.LineColor = ColorTranslator.FromHtml("#2c4c6d");

cht4.ChartAreas[0].AxisY2.LineColor = Color.Transparent;
cht4.ChartAreas[0].AxisX.IsMarginVisible = false;
cht4.ChartAreas[0].Area3DStyle.Enable3D = true;
cht4.ChartAreas[0].AxisX.IsInterlaced = false;
cht4.ChartAreas[0].AxisX.IsMarginVisible = false;
//刻度线
cht4.ChartAreas[0].AxisY.MajorTickMark.Enabled = false;
//cht4.ChartAreas[0].AxisX.MajorGrid.Enabled = false;
//cht4.ChartAreas[0].AxisY.MajorGrid.Enabled = false;
//cht4.ChartAreas[0].AxisX.MajorTickMark.Enabled = false;
cht4.ChartAreas[0].AxisY.LabelStyle.Enabled = false;
//背景渐变
cht4.ChartAreas[0].BackGradientStyle = GradientStyle.None;
//cht4.ChartAreas[0].AxisX2.InterlacedColor = Color.Red;
//cht4.ChartAreas[0].AxisY2.InterlacedColor = Color.Red;
//cht4.ChartAreas[0].BorderWidth = 0;
//cht4.ChartAreas[0].BackSecondaryColor = Color.Red;
//cht4.ChartAreas[0].BackImageTransparentColor = Color.Red;
//cht4.ChartAreas[0].AxisX.InterlacedColor = Color.Red;
//cht4.ChartAreas[0].AxisX.LineColor = Color.Red;
//cht4.ChartAreas[0].AxisX2.LineColor = Color.Red;
//cht4.ChartAreas[0].AxisX2.MajorGrid.LineColor = Color.Red;
//cht4.ChartAreas[0].AxisX2.MajorTickMark.LineColor = Color.Red;
//cht4.ChartAreas[0].AxisX2.MinorTickMark.LineColor = Color.Red;
//cht4.ChartAreas[0].AxisY.InterlacedColor = Color.Red;
//cht4.ChartAreas[0].AxisY.LineColor = Color.Red;
//cht4.ChartAreas[0].AxisY2.InterlacedColor = Color.Red;
//cht4.ChartAreas[0].AxisY2.LineColor = Color.Red;
//cht4.ChartAreas[0].AxisY2.MajorGrid.LineColor = Color.Red;
//cht4.ChartAreas[0].AxisY2.MajorTickMark.LineColor = Color.Red;
//cht4.ChartAreas[0].AxisY2.MinorTickMark.LineColor = Color.Red;


//图例样式
Legend legend4 = new Legend();
legend4.Title = "图例";
legend4.TitleBackColor = Color.Transparent;
legend4.BackColor = Color.Transparent;
legend4.TitleForeColor = Color.White;
legend4.TitleFont = new Font("微软雅黑", 10f, FontStyle.Regular);
legend4.Font = new Font("微软雅黑", 8f, FontStyle.Regular);
legend4.ForeColor = Color.White;
cht4.Legends.Add(legend4);
cht4.Legends[0].Position.Auto = true;

//Series1
cht4.Series[0].XValueType = ChartValueType.String; 
cht4.Series[0].Label = "#VAL";                
cht4.Series[0].LabelForeColor = Color.White;
cht4.Series[0].ToolTip = "#LEGENDTEXT:#VAL(宗)";    
cht4.Series[0].ChartType = SeriesChartType.Radar;    
cht4.Series[0]["RadarDrawingStyle"] = "Line";  
cht4.Series[0].LegendText = "2015年";
cht4.Series[0].IsValueShownAsLabel = true;

//Series2
cht4.Series.Add(new Series("Series2"));
cht4.Series[1].Label = "#VAL";                
cht4.Series[1].LabelForeColor = Color.White;
cht4.Series[1].ToolTip = "#LEGENDTEXT:#VAL(宗)";     
cht4.Series[1].ChartType = SeriesChartType.Radar;   
cht4.Series[1]["RadarDrawingStyle"] = "Line";
cht4.Series[1].LegendText = "2016年";
cht4.Series[1].IsValueShownAsLabel = true;

//Series3
cht4.Series.Add(new Series("Series3"));
cht4.Series[2].Label = "#VAL";               
cht4.Series[2].LabelForeColor = Color.White;
cht4.Series[2].ToolTip = "#LEGENDTEXT:#VAL(宗)";     
cht4.Series[2].ChartType = SeriesChartType.Radar;    
cht4.Series[2]["RadarDrawingStyle"] = "Line";
cht4.Series[2].LegendText = "2017年";
cht4.Series[2].IsValueShownAsLabel = true;


double[] yValues = { 65.62, 75.54, 60.45, 34.73, 85.42, 55.9, 63.6, 55.2, 77.1 };
string[] xValues = { "France", "Canada", "Germany", "USA", "Italy", "Spain", "Russia", "Sweden", "Japan" };


//Seris2  
double[] y2 = { 45.62, 65.54, 70.45, 84.73, 35.42, 55.9, 63.6 };
double[] y3 = { 88.62, 35.54, 52.45, 45.73, 88.42, 14.9, 33.6 };
this.cht4.Series[0].Points.DataBindXY(xValues, yValues);
this.cht4.Series[1].Points.DataBindY(y2);
this.cht4.Series[2].Points.DataBindY(y3);


//设置X轴显示间隔为1,X轴数据比较多的时候比较有用  
cht4.ChartAreas[0].AxisX.LabelStyle.Interval = 1;
//设置XY轴标题的名称所在位置位远  
cht4.ChartAreas[0].AxisX.TitleAlignment = StringAlignment.Near;

for (int i = 0; i < cht4.Series[2].Points.Count; i++)
{
    cht4.Series[2].Points[i].MarkerStyle = MarkerStyle.Circle;//设置折点的风格     
    cht4.Series[2].Points[i].MarkerColor = Color.Red;//设置seires中折点的颜色   
//    cht4.Series[1].Points[i].MarkerStyle = MarkerStyle.Square;//设置折点的风格     
//    cht4.Series[1].Points[i].MarkerColor = Color.Blue;//设置seires中折点的颜色  
//    cht4.Series[2].Points[i].MarkerStyle = MarkerStyle.Square;//设置折点的风格     
//    cht4.Series[2].Points[i].MarkerColor = Color.Green;//设置seires中折点的颜色  
}
for (int i = 0; i < cht4.Series.Count; i++)
{
    for (int j = 0; j < cht4.Series[i].Points.Count; j++)
    {
        cht4.Series[i].Points[j].Label = " ";
        //cht4.Series[i].Points[j].LabelToolTip = "string.Empty";
    }
}
//cht4.ImageType = ChartImageType.Jpeg;
//反锯齿  
cht4.AntiAliasing = AntiAliasingStyles.All;
//调色板 磨沙:SemiTransparent  
cht4.Palette = ChartColorPalette.BrightPastel;

cht4.Series[0].ChartType = SeriesChartType.Radar;
cht4.Series[1].ChartType = SeriesChartType.Radar;
cht4.Series[2].ChartType = SeriesChartType.Radar;
cht4.Width = 500;
cht4.Height = 350;

#endregion

/* 
     #VALX      显示当前图例的X轴的对应文本(或数据) 
     #VAL, #VALY,  显示当前图例的Y轴的对应文本(或数据) 
     #VALY2, #VALY3, 显示当前图例的辅助Y轴的对应文本(或数据) 
     #SER:      显示当前图例的名称 
     #LABEL       显示当前图例的标签文本 
     #INDEX      显示当前图例的索引 
     #PERCENT       显示当前图例的所占的百分比 
     #TOTAL      总数量 
     #LEGENDTEXT      图例文本 
     */

}

完结，以下总结和忽略

C# Chart 控件深度解析与实战总结

在数据可视化领域，图表是一种直观展示数据关系和趋势的重要工具。微软在 .NET 框架中提供了强大的 System.Web.UI.DataVisualization.Charting 命名空间，其中 Chart 控件功能丰富，支持多种图表类型（如柱状图、饼图、雷达图等），并提供了高度的自定义能力。本文结合实践经验和参考资源，系统总结了 Chart 控件的核心功能、关键属性及实战技巧，旨在帮助开发者高效利用该控件实现专业级数据可视化。

一、Chart 控件的核心功能

Chart 控件的核心功能围绕以下几个关键模块展开：

1. 图表区（ChartAreas）

作用：定义图表的绘图区域，一个 Chart 控件可包含多个 ChartArea，用于在同一控件中展示不同类型或不同数据集的图表（如柱状图 + 折线图）。
关键属性：
- BackColor：设置背景色（支持透明）。
- AxisX/AxisY：配置坐标轴样式（颜色、刻度、标签角度等）。
- Area3DStyle：启用 3D 效果（如 Enable3D=true）。
实战示例：
在代码中通过 cht1.ChartAreas[0] 配置主绘图区，通过 cht2.ChartAreas[0] 配置次绘图区，实现多区域独立展示。

2. 数据系列（Series）

作用：绑定数据并定义图表类型（如折线图、饼图）。每个 Series 可绑定一组 X/Y 数据，支持多系列叠加显示。
关键属性：
- ChartType：指定图表类型（如 SeriesChartType.Column、Pie）。
- Points.DataBindXY：绑定数据源（X 轴和 Y 轴数组）。
- Palette：设置调色板（如 BrightPastel）。
实战示例：
通过 cht1.Series[0].Points.DataBindXY(x, y) 绑定数据，并通过 SeriesChartType.Column 设置为柱状图。

3. 图例（Legends）

作用：解释图表中不同颜色或样式的含义，尤其适用于多系列或分组数据。
关键属性：
- Docking：设置停靠位置（如 Right、Top）。
- Title：图例标题。
- IsVisibleInLegend：控制系列是否显示在图例中。
实战示例：
通过 cht1.Legends.Add(legend) 添加图例，并绑定到 Series 的 LegendText 属性。

4. 标题与注解（Titles & Annotations）

作用：增强图表可读性，标题用于概括图表内容，注解用于标记关键数据点。
关键属性：
- Titles.Add()：添加标题并设置文本、字体、颜色。
- Annotations：添加箭头、文本等注解（如 ArrowAnnotation）。
实战示例：
通过 cht1.Titles.Add("柱状图数据分析") 设置主标题，并通过 Annotations 标记特定数据点。

二、关键属性详解与配置技巧

1. 坐标轴定制

轴标签旋转：

cht1.ChartAreas[0].AxisX.LabelStyle.Angle = -45; // 标签倾斜45度

网格线控制：

cht1.ChartAreas[0].AxisX.MajorGrid.Enabled = true;
cht1.ChartAreas[0].AxisX.MajorGrid.LineColor = Color.LightGray;

动态范围：
通过 AxisX.Minimum 和 AxisX.Maximum 动态调整坐标轴范围。

2. 数据绑定与动态更新

静态数据绑定：

string[] x = { "A", "B", "C" };
double[] y = { 10, 20, 30 };
cht1.Series[0].Points.DataBindXY(x, y);

动态更新：
在定时器中追加数据点：

cht1.Series[0].Points.AddXY("D", 40);
cht1.DataManipulator.FinancialFormula(FinancialFormula.MovingAverage, "3", cht1.Series[0], "MovingAverage");

3. 样式与主题

全局样式：

cht1.BackColor = Color.Transparent; // 透明背景
cht1.Palette = ChartColorPalette.Fire; // 使用内置调色板

自定义调色板：
通过 Series[i].Color 逐个设置颜色，或使用 CustomPalette 扩展。

4. 多图表类型组合

在同一个 ChartArea 中叠加不同类型图表（如折线图 + 柱状图）：

cht1.Series[0].ChartType = SeriesChartType.Column;
cht1.Series[1].ChartType = SeriesChartType.Line;
cht1.Series[1].YAxisType = AxisType.Secondary; // 使用次Y轴

三、实战案例分析

案例1：柱状图与折线图组合

// 柱状图配置
cht1.Series[0].ChartType = SeriesChartType.Column;
cht1.Series[0].Points.DataBindXY(months, sales);

// 折线图配置（叠加在同一区域）
cht1.Series.Add("Target");
cht1.Series[1].ChartType = SeriesChartType.Line;
cht1.Series[1].Points.DataBindY(targets);
cht1.Series[1].YAxisType = AxisType.Secondary;

效果：柱状图显示实际销售额，折线图显示目标值，次Y轴自动缩放。

案例2：动态雷达图

// 动态绑定数据
cht4.Series[0].Points.Clear();
foreach (var item in dataList) {
    cht4.Series[0].Points.AddXY(item.Category, item.Value);
}
cht4.DataBind();

优化点：通过 AntiAliasing = AntiAliasingStyles.All 启用抗锯齿，提升渲染质量。

四、常见问题与解决方案

1. 中文乱码

原因：默认字体不支持中文。

解决：显式设置中文字体：

cht1.Titles[0].Font = new Font("微软雅黑", 12f);

2. 性能优化

场景：大数据量（>10,000 点）导致卡顿。
方案：
- 启用 Series.SmartLabelStyle.Enabled = false 禁用智能标签。
- 使用 DataManipulator.Filter 降采样。

3. 导出图片

cht1.SaveImage("chart.png", ChartImageFormat.Png);

五、总结与扩展建议

核心价值

灵活性：通过组合 ChartAreas、Series 和 Legends，可实现复杂可视化需求。
易用性：数据绑定接口简洁，支持动态更新。
可扩展性：支持自定义绘制（通过 PostPaint 事件）和第三方主题。

扩展方向

实时监控：结合 Timer 和数据库轮询实现动态数据流。
交互增强：通过 MouseMove 事件显示悬浮提示。
跨平台：在 .NET Core 中使用 LiveCharts 或 OxyPlot 替代（Chart 控件主要面向 WebForms/WinForms）。

通过本文的总结，开发者可以快速掌握 Chart 控件的核心用法，并根据实际需求灵活调整配置，构建出专业、高效的数据可视化解决方案。