mschart控件 用法

介绍MSChart的常用属性和事件

介绍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.DataSource = GetData.GetChartData();
Chart1.Series["ChartArea1"].XValueMember ="home";
Chart1.Series["ChartArea1"].YValueMembers ="num1";

第二种往后都是通过List的集合形式绑定数据,这里就用变量list来代替了.一些变量都是对应实体类的名称当然也对应数据库字段

Chart1.DataBindTable(list, "home");

"home"是 x轴坐标

第三种,home  分组,Time X轴坐标,num1 y轴坐标

Chart1.DataBindCrossTable(list, "home", "Time", "num1", "Label=num1,ToolTip=num1");

第三种,折线图绑定方式

Chart1.Series[0].Points.DataBind(list, "home", "num1", "Label=num1,ToolTip=num1");

第四种,折线图绑定方式

Chart1.DataBindCrossTable(list, "home", "Time", "num1", "Label=num1,ToolTip=num1");
//绘制线条
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++;
} 

第五种:

Chart1.Series["Series1"].Points.DataBindXY(list, "home", list, "num1");

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"].Points.DataBind(list, "home", "num1", "LegendText=home,YValues=num1,ToolTip=num1");

LegendText整了我半天.这个是显示右侧说明的,开始老是显示不出来,而且还不统一. 

Legend其实就是右侧显示的说明,但是做过的朋友会发现在柱形图还有折线图如果页面指定了一个<Lengend></Lengend>标签的话,会多显示一个,所以需要在执行绑定的时候

写上这么一段代码 Chart1.Series.Clear();

  

   MSChart 设置线图节点样式 

Chart1.Series["Series1"].MarkerStyle = MarkerStyle.Circle;    //设置点标记样式(此为圆点)

Chart1.Series["Series1"].MarkerSize = 8;    //设置线节点大小

   设置取消轴边距 Chart1.ChartAreas["ChartArea1"].AxisX.IsMarginVisible = false;

  

   设置节点为空心圆点

   Chart1.Series["Series1"].MarkerStyle = MarkerStyle.Circle;  //设置点标记样式(此为圆点)
   Chart1.Series["Series1"].MarkerColor = Color.White;
   Chart1.Series["Series1"].BorderColor = Color.Red;
   Chart1.Series["Series1"].BorderWidth = 1;
   Chart1.Series["Series1"].MarkerSize = 5;    //设置线节点大小

 

   设置鼠标放置到节点上自动提示功能

   Chart1.Series["Series1"].ToolTip = "文章数#VAL"; //#VAL--Y轴数组

  

转自：http://www.cnblogs.com/xiaogangqq123/archive/2010/06/24/1764282.html