介绍MSChart的常用属性和事件
MSChart的元素组成
最常用的属性包括
ChartAreas:增加多个绘图区域,每个绘图区域包含独立的图表组、数据源,用于多个图表类型在一个绘图区不兼容时。
AlignmentOrientation:图表区对齐方向,定义两个绘图区域间的对齐方式。
AlignmentStyle:图表区对齐类型,定义图表间用以对其的元素。
AlignWithChartArea:参照对齐的绘图区名称。
InnerPlotPosition:图表在绘图区内的位置属性。
Auto:是否自动对齐。
Height:图表在绘图区内的高度(百分比,取值在0-100)
Width:图表在绘图区内的宽度(百分比,取值在0-100)
X,Y:图表在绘图区内左上角坐标
Position:绘图区位置属性,同InnerPlotPosition。
Name:绘图区名称。
Axis:坐标轴集合
Title:坐标轴标题
TitleAlignment:坐标轴标题对齐方式
Interval:轴刻度间隔大小
IntervalOffset:轴刻度偏移量大小
MinorGrid:次要辅助线
MinorTickMark:次要刻度线
MajorGrid:主要辅助线
MajorTickMark:主要刻度线
DataSourceID:MSChart的数据源。
Legends:图例说明。
Palette:图表外观定义。
Series:最重要的属性,图表集合,就是最终看到的饼图、柱状图、线图、点图等构成的集合;可以将多种相互兼容的类型放在一个绘图区域内,形成复合图。
IsValueShownAsLabel:是否显示数据点标签,如果为true,在图表中显示每一个数据值
Label:数据点标签文本
LabelFormat:数据点标签文本格式
LabelAngle:标签字体角度
Name:图表名称
Points:数据点集合
XValueType:横坐标轴类型
YValueType:纵坐标轴类型
XValueMember:横坐标绑定的数据源(如果数据源为Table,则填写横坐标要显示的字段名称)
YValueMembers:纵坐标绑定的数据源(如果数据源为Table,则填写纵坐标要显示的字段名称,纵坐标可以有两个)
ChartArea:图表所属的绘图区域名称
ChartType:图表类型(柱形、饼形、线形、点形等)
Legend:图表使用的图例名称
Titles:标题集合。
width:MSChart的宽度。
height:MSChart的高度。
常用事件:
Series1.Points.DataBind()
绑定数据点集合,如果要在一个MSChart控件的一个绘图区(ChartArea)内添加多个不同数据源的图表,就用这个主动绑定数据集合的方法。可以将表中指定字段的值绑定到指定的坐标轴上。
MSChart1.DataBind()
给整个MSChart绑定一个数据源,该MSChart中的图表全部可以使用该数据源作为统计来源。
<asp:Chart ID="Chart1" runat="server">
<Series>
<asp:Series Name="Series1">
</asp:Series>
</Series>
<ChartAreas>
<asp:ChartArea Name="ChartArea1">
</asp:ChartArea>
</ChartAreas>
</asp:Chart>
主要介绍 MSChart的 折线图,圆饼图,和柱状图, 因为这三种本人感觉是最常用的.
对于这三种用MSChart来实现的话本人感觉比较困难的就是数据绑定带来的麻烦,因为在我们平时使用的时候基本都是动态的数据,
而微软实例基本都是写死在页面上的数据, 而且网上这方面资料也比较少,只能自己动手实践啦.
先介绍几种MSChart的数据绑定方式,
第一种,也是最通俗的一种
Chart1.Series[ " ChartArea1 " ].XValueMember = " home " ;
Chart1.Series[ " ChartArea1 " ].YValueMembers = " num1 " ;
第二种往后都是通过List的集合形式绑定数据,这里就用变量list来代替了.一些变量都是对应实体类的名称当然也对应数据库字段
"home"是 x轴坐标
第三种,home 分组,Time X轴坐标,num1 y轴坐标
第三种,折线图绑定方式
第四种,折线图绑定方式
// 绘制线条
MarkerStyle marker = MarkerStyle.Square;
foreach (Series ser in Chart1.Series)
{
ser.ShadowOffset = 1 ;
ser.BorderWidth = 2 ;
ser.ChartType = SeriesChartType.Line;
ser.MarkerSize = 12 ;
ser.MarkerStyle = marker;
ser.MarkerBorderColor = Color.FromArgb( 64 , 64 , 64 );
ser.Font = new Font( " Trebuchet MS " , 8 , FontStyle.Regular);
marker ++ ;
}
第五种:
MSChart下的柱形图
//是否启用3D显示
Chart1.ChartAreas[0].Area3DStyle.Enable3D = true;
//显示类型,可以是柱形 折线等等
Chart1.Series[0].ChartType = SeriesChartType.Line;
Draw as 3D Cylinder
Chart1.Series[0]["DrawingStyle"] = "Cylinder";
//像素点见宽度
Chart1.Series[0]["PointWidth"] = "0.8";
//是否显示数值
Chart1.Series[0].IsValueShownAsLabel = true;
//X轴数据显示间隔
Chart1.ChartAreas[0].AxisX.Interval = 1;
//直角坐标显示,
Chart1.ChartAreas[0].Area3DStyle.IsRightAngleAxes = false;
//是否群集在一起
Chart1.ChartAreas[0].Area3DStyle.IsClustered = false;
//转动X轴角度
Chart1.ChartAreas[0].Area3DStyle.Inclination = 40;
//转动Y轴角度
Chart1.ChartAreas[0].Area3DStyle.Rotation = 20;
foreach (Series ser in Chart1.Series)
{
//柱形宽度
ser["PixelPointWidth"] = "40";
//像素点深度
ser["PixelPointDepth"] = "80";
//像素点间隙深度
ser["PixelPointGapDepth"] = "10";
}
这些属性都是设置MSChart的外观样式的属性,大家可以尝试修改试试,
当然主要的是绑定数据了.所以在调用这些属性时先用上文介绍的几种绑定方式绑定数据.
有些属性可能在3D模式下失效或者在2D模式下失效,这是正常现象,
效果图:
折线图:
属性同上..有些属性会在折线图下失效,
效果图:
圆饼图:
IList<ChartModel> list = GetData.GetChartDataListByPie();
//数值显示百分比形式
Chart1.Series["Series1"].Label = "#PERCENT{P}";
Chart1.Series["Series1"].Points.DataBind(list, "home", "num1", "LegendText=home,YValues=num1,ToolTip=num1");
//鼠标划过时提示
Chart1.Series["Series1"].ChartType = System.Web.UI.DataVisualization.Charting.SeriesChartType.Pie;
Chart1.Series["Series1"].ToolTip = "#LEGENDTEXT: #VAL{C} million";
Chart1.ChartAreas["ChartArea1"].Area3DStyle.Enable3D = true;
Chart1.Series["Series1"].MarkerStyle = MarkerStyle.Circle; //设置点标记样式(此为圆点)
Chart1.Series["Series1"].MarkerSize = 8; //设置线节点大小
设置取消轴边距 Chart1.ChartAreas["ChartArea1"].AxisX.IsMarginVisible = false;
Chart1.Series["Series1"].MarkerColor = Color .White;
Chart1.Series["Series1"].BorderColor = Color. Red;
Chart1.Series["Series1"].BorderWidth = 1;
Chart1.Series["Series1"].MarkerSize = 5; //设置线节点大小