MSChart使用技巧总结
MSChart使用技巧总结
上一篇文章写了用dotnetCHARTING 制作柱形图,折线图和圆饼图 园友一直在推荐用微软的MSChart..于是,这几天工作之余研究了一下,其中也发现了不少问题.
首先当然需要下载MSChart 下载地址 而且微软官方有个很不错的实例代码可以帮助学习使用MSChart 下载地址,当然不用我说.大家也知道的.需要NET Framework 3.5以及配合VS2008 sp1来使用了,至于vs2010好像还没有发现MSChart ,希望有知道的朋友给点帮助.
安装完MSChart后在vs2008报表一栏里会出现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下的柱形图
常用的属性这篇博客都有介绍,在这里我就不罗嗦了..http://www.cnblogs.com/wenjl520/archive/2009/05/16/1458461.html
代码
//是否启用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();
主要是这里的 Chart1.Series["Series1"].Points.DataBind(list, "home", "num1", "LegendText=home,YValues=num1,ToolTip=num1");
LegendText整了我半天.这个是显示右侧说明的,开始老是显示不出来,而且还不统一.
Legend其实就是右侧显示的说明,但是做过的朋友会发现在柱形图还有折线图如果页面指定了一个<Lengend></Lengend>标签的话,会多显示一个,所以需要在执行绑定的时候
写上这么一段代码 Chart1.Series.Clear();
MSChart可不止可以制作这三种图形,我只是觉得这三种比较常用.想在圆饼图中合并几项成显示成其他,搞了半天没搞出来,郁闷,谁知道告诉下.
http://www.cnblogs.com/xiaogangqq123/archive/2010/06/24/1764282.html
图表是一种直观易懂的显示信息的方式，为了在.Net应用程序中支持图表，微软在.Net SP1和Visual Studio 2008中提供了一个插件以支持强壮的图表，再也不用花钱购买昂贵的、有专利权的软件了。为了能够创建本文所说的图表，你需要安装Microsoft Chart Controls for Microsoft .NET Framework 3.5和Microsoft Chart Controls add-on for Microsoft Visual Studio 2008。如果你对图表还不熟悉，那就仔细阅读本文吧。
ChartAreas控件
ASP.NET 3.5 ChartAreas控件中的ChartAreas属性是ChartArea对象的集合，ChartArea负责显示容器的属性或图表的背景，由于不止一个，这就意味着MSChart控件可以包含多个图表。
在使用多个ChartAreas时理解下面几点内容非常重要：
在技术上可以控制ChartArea的位置，因此多个ChartArea可以叠加，但不推荐这么做，建议在MSChart控件内的独立区域内绘制它们，为了合并或覆盖数据点，推荐在一个ChartArea内使用多个序列，后面将会有介绍。默认情况下，控件会为你自动调整大小和位置。
单个ChartArea将会独立调整以适应数据，正如上图所显示的，第二个ChartArea中的Y值更大，数据点也更少。
多个ChartAreas控件允许你使用多个不相容的ChartTypes（序列对象属性，控制图表的显示类型，如条形、柱状和饼状）显示图表，图表任然显示在相同的MSChart控件内。
对于单个ChartArea，有许多独立的属性可以设置和调整，这样你就可以自行调整图表区域以满足不同的需要，它的大部分属性和面板控件的属性都差不多，因此这里我们就不多说了，只说一下ChartArea唯一的属性，下面是这些唯一属性的清单：
3D样式：使用ChartArea的Area3DStyle属性和子属性，我们可以创建漂亮的、十分抢眼的3D图表，无论是在设计器中还是在代码中都必需将Enable3D属性设置为TRUE，其余的参数可以通过调整旋转、视角、照明方式和其它3D元素，让一个图像看起来具有3D效果。
坐标轴控制和样式：坐标轴集合包括x轴和y轴，以及第二个x轴和y轴，这四个项目的属性允许你设置样式、设置标签、定义间隔、设置工具提示、设置缩放等，如果你的图标要求精确的间隔、标签或其它特殊的显示需要，你可以使用这些属性。例如，你可以颠倒坐标轴的值，或控制如何在x轴上显示标签。如果你使用图表显示实时信息，可以使用IntervalType属性来配置基于日期和时间显示数据点。
选择光标：如果你对用户使用鼠标选择数据点或点击和拖拉范围非常感兴趣，这个时候就要用到CursorX和CursorY属性了，你可以启用选择，并设置最初的光标位置或范围。
Series
和ChartAreas属性一样，Series属性是一个集合。
单个ChartAreas实例包括3个重要的属性：ChartArea属性、ChartType属性和Points集合属性。
ChartArea：识别使用哪个ChartArea。
ChartType：识别表示数据时使用的图标类型，基本的类型有条形、柱状、饼状和线状，还有一些高级选项，如K线图、曲线图、追星图等。
Points：它是DataPoint对象的集合，包括x值和y值，它们是绘在图表上的序列的一部分，数据绑定时最常用的增加数据点的方法，本文后面会做介绍。
Series实例上的其他常用属性和人们广泛了解的还包括：
Color：这个属性用于单独设置每个数据点序列的颜色，默认情况下，这个属性是空白的，控件会自动改变颜色，以保证将多个序列区分开来。
IsValueShownAsLabel：将这个属性的值设为TRUE后（默认是FLASE），图表将显示每个数据点的Y值。
在讲多个序列实例合并到一个ChartArea中时，例如下面两个独立的图表，每个图表都包括6个数据点。
假设你想比较这两个图表中的数据点，你可以将这两个MSChart控件放在一起，相互挨着，也可以在一个图表中使用两个ChartAreas控件，这两种方式都没问题，但都不能给你很好的视觉比较效果，这就是为什么MSChart要合并数据点，让你可以肩并肩地对比数据。将第二个图表中的数据作为第二个序列实例添加到第一个图表中，一下子就从视觉上改善了对比的效果。
使用多个序列实例时，记住每个序列使用的ChartType非常重要，不是所有ChartType选项放在一起都是兼容的。
总的说来，图表控件的层次如下：MSChart控件有零到多个ChartAreas，一个ChartAreas有零到多个序列（Series），一个序列有零到多个数据点（DataPoints）。
数据绑定
数据可以在设计时或运行时绑定，在设计时绑定要使用到数据源配置向导，在MSChart控件数据源属性下拉按钮中可以找到它，如果你已经配置过数据源，你可以在下拉列表中进行选择。
图表函数
DataBind()：绑定数据源的基础函数。
DataBindTable()：绑定图表到特定的数据表，但不允许绑定多个Y值，每个序列不同的数据源或x值、y值有不同的数据源。
DataBindCrossTab()：将图表绑定到一个数据源，并允许基于一个数据列进行分组，在具体指定的列上每个唯一的值将自动创建一个单独的序列。
数据点函数
DataBind()：绑定一个序列到单一的数据源，并允许其它属性绑定到同一个数据源（如标签、工具提示、图例文本等）。
DataBindXY()：允许将x值和y值绑定到独立的数据源，它也用于为每个序列绑定单独的数据源。
DataBindY()：仅绑定序列中数据点的Y值。
数据源配置好后，MSChart控件可以绑定所有的实现了IEnumerable接口的对象，包括但不限于DataReader、DataSet、Array和List。也允许绑定SqlCommand、OleDbCommand、SqlDataAdapters和OleDbDataAdapter对象。
图例
图例属性也是一个集合（叫做图例对象），为了快速理解使用图例可以做什么，可以把它想象成一个简单的表，假设你有一个表格，默认有两列，你可以从前面的例子看出，使用序列实例名的默认设置和序列的颜色，图例可以通过添加额外的单元列到CellColumn集合上进行扩展，还可以添加列标题，便于更好地理解图例。在下面的例子，标题“Name”和“Color”已经添加到默认图例实例上。
每个序列的图例文本由序列自身控制，在每个序列实例上使用LegendText属性以改变图表上图例的文本，你也可以给图例一个标题。在下面的例子，图例被标题为“图例”，除此之外，你还可以输入文本，你也可以设置属性来处理标题的对齐、颜色和字体，你会发现大部分MSChart属性这类操作和自定义，只要你愿意。
最后，图表的图例有两种放置方法，默认是在ChartArea外部，位于右侧，紧挨ChartArea。另一种是通过坐标进行精确控制，停靠在ChartArea内，通过设置ChartArea对象的DockedToChartArea属性实现。
标题
标题和前面讨论到的其它属性类似，为每个标题创建独立的实例时，图表控件会在标题集合中保留这些标题实例，理解标题的最好方法是将其认为是一个标签控件，这意味着标题可以顶端居中、左端居中、顶端居左和底部居右。
在下面的例子中，图表拥有一个字体大小，顶端居中的标题，叫做“My First Chart”。
提示和技巧
3D透明性：可以在序列上使用一些透明属性让3D图表看起来更漂亮，在设计时，可以将Alpha值添加到要使用的颜色的RGB代码中，在属性窗口中，选择序列集，选择一个序列，在该序列的属性窗口上，在现有的3个RGB值前添加一个Alpha值，你可以使用下面的代码完成同样的任务：
- chart1.Series["Series1"].
- Color = Color.FromArgb(220, 123, 123, 123);
利用设计器：在大多数时候，在代码运行时才配置图表控件的属性和配置选项是很愚蠢的，当你的应用程序以静态的方式使用图表时（如一直都是两个序列的条形图），在设计时，设计器允许你配置和查看图表。另一方面，如果你倾向于动态使用图表（如一会儿是饼图，一会儿是线状图，用户在运行时可以自行修改），这种情况需要代码在运行时修改设计，不用为每种图表类型都手动创建代码，使用设计器创建后，从设计文件中去除多余的代码，这样可以节约你编码和决定使用哪个属性的时间。
逻辑名：这是一个通用的优秀编程习惯，在创建ChartAreas、Series和Titles等时，请确定都给它们取了名字，并且是容易记住的，例如，chart1.Series["Series1"]…, chart1.Series["Series2"]…就比chart1.Series["salesrepearningquarter"]…, chart1.Series["salesrepcomdatabyquarter"]…更容易引入错误。
小结
微软的ASP.NET 3.5图表控件提供了强壮的、灵活的和可自定义的图表控件，为显示提供给用户的信息提供了一种更简单可接受的方法，本文讲了ChartAreas控件图表的高级属性，现在你可以开始创建好看的图表赢得客户的欢心。
微软新发布的图表控件MSChart，依赖于Framework3.5 sp1的环境，从制作出的效果来看，非常漂亮。最近花时间研究了下，算是好用的，功能也很强大，建议大家可以试试。
2维柱状图
2维范围图
3维点图
3维饼图
3维金字塔图
3维柱状图
先从安装开始，下载地址：
控件：Microsoft .NET Framework 3.5 的 Microsoft 图表控件(Microsoft Chart Controls for Microsoft .NET Framework 3.5
语言包：Microsoft Chart Controls for Microsoft .NET Framework 3.5 Language Pack
vs2008集成控件：Microsoft Chart Controls Add-on for Microsoft Visual Studio 2008
文档 （Microsoft Chart Controls for .NET Framework Documentation）
WinForm 和 Asp.net的例子（Samples Environment for Microsoft Chart Controls）
添加到项目：
安装好1中的3项后，s2008的工具栏中即会出现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中的图表全部可以使用该数据源作为统计来源。
示例：
private void BindGrid()
{
chart2.Width
= 800;
chart2.Height = 600;
//作图区的显示属性设置
//chart2.ChartAreas["ChartArea1"].AxisX.IsMarginVisible = false;
//chart2.ChartAreas["ChartArea1"].Area3DStyle.Enable3D = false;
//背景色设置
chart2.ChartAreas["ChartArea1"].ShadowColor = Color.Transparent;
chart2.ChartAreas["ChartArea1"].BackColor = Color.FromArgb(209, 237,
254); //该处设置为了由天蓝到白色的逐渐变化
chart2.ChartAreas["ChartArea1"].BackGradientStyle =
GradientStyle.TopBottom;
chart2.ChartAreas["ChartArea1"].BackSecondaryColor = Color.White;
//X,Y坐标线颜色和大小
chart2.ChartAreas["ChartArea1"].AxisX.LineColor = Color.FromArgb(64,
64, 64, 64);
chart2.ChartAreas["ChartArea1"].AxisY.LineColor = Color.FromArgb(64,
64, 64, 64);
chart2.ChartAreas["ChartArea1"].AxisX.LineWidth = 2;
chart2.ChartAreas["ChartArea1"].AxisY.LineWidth = 2;
chart2.ChartAreas["ChartArea1"].AxisX.Title = "时间";
chart2.ChartAreas["ChartArea1"].AxisY.Title = "灰量";
//中间X,Y线条的颜色设置
chart2.ChartAreas["ChartArea1"].AxisX.MajorGrid.LineColor =
Color.FromArgb(64, 64, 64, 64);
chart2.ChartAreas["ChartArea1"].AxisY.MajorGrid.LineColor =
Color.FromArgb(64, 64, 64, 64);
//X.Y轴数据显示间隔
chart2.ChartAreas["ChartArea1"].AxisX.Interval
= 1.0; //X轴数据显示间隔
chart2.ChartAreas["ChartArea1"].AxisX.IntervalType =
DateTimeIntervalType.Days;
chart2.ChartAreas["ChartArea1"].AxisX.IntervalOffset = 0.0;
chart2.ChartAreas["ChartArea1"].AxisX.IntervalOffsetType =
DateTimeIntervalType.Days;
chart2.ChartAreas["ChartArea1"].AxisX.LabelStyle.Format =
"M-d";
chart2.ChartAreas["ChartArea1"].AxisY.Interval
= 200;//y轴数据显示间隔
//X轴线条显示间隔
//chart2.ChartAreas["ChartArea1"].AxisX.MajorGrid.IntervalType =
DateTimeIntervalType.Hours;
chart2.Palette = ChartColorPalette.Pastel;
string sql = "select sum(zhl) zhl, input_date, ash_type_name from ("
+
"
select sum(t.second_load - t.first_load) as zhl," +
" to_date(to_char(t.input_date, 'dd/mm/yyyy')||'00:00','dd/mm/yyyy
hh24:mi:ss') as input_date," +
" u.ash_type_name" +
"
from transportation_bill t, ash_type u" +
"
where t.ash_type_id = u.ash_type_id" +
" and (t.input_date between to_date('2009-6-11','yyyy-mm-dd') and
to_date('2009-6-20','yyyy-mm-dd'))" +//此处加按日期查询的条件
"
and t.sale_organization_id = 1" +//此处加用户所在机构查询条件
"
group by u.ash_type_name, t.input_date" +
"
order by t.input_date" +
")" +
"
group by ash_type_name,input_date" +
" order
by input_date";
DataTable
dt2 = OracleHelper.ExecuteDataTable(OracleHelper.ConnectionString,
CommandType.Text, sql, "T", null);
chart2.DataBindCrossTable(dt2.DefaultView, "ash_type_name",
"input_date", "zhl", "",
PointSortOrder.Ascending);
foreach (Series sr in chart2.Series)
{
sr.ChartType = SeriesChartType.Spline;
sr.XValueType = ChartValueType.Date;
sr.MarkerStyle = MarkerStyle.Circle;//散点样式
sr.MarkerSize = 5;//默认是5，散点大小
sr.MarkerStep = 1;//默认是1，散点频率
sr.MarkerColor = 1;//默认是透明，散点颜色
sr.BorderWidth = 2;
}
//chart2.Legends["Default"].Docking = Docking.Left;
}
http://cxp.9876.blog.163.com/blog/static/16108256201031451851533/
最近公司要求做一个报表. 显示全年销售评估图表. 这一下子让我联想到了微软的MSChart控件，因为之前有过这方面的研究.所以做起来不是很费力. 准确的说是，没做一次 都有一次不同的启发，不同的感想吧 。也希望这次自己琢磨出来的东西，能对大家有好处！
好了，一向不喜欢说废话的我，突然说了这么多.... 直接从项目里面粘贴源码吧！（偷懒）希望大家多多指教..谢谢！
ASP.NET前台：
1 <div class="myChartCss">
2 <asp:Chart ID="Chart1"
runat="server" Width="1024px">
3 <Series>
4 <asp:Series Name="销量">
5 </asp:Series>
6 </Series>
7 <ChartAreas>
8 <asp:ChartArea
Name="ChartArea1">
9 </asp:ChartArea>
10 </ChartAreas>
11 <Legends>
12 <asp:Legend Alignment="Center" Docking="Bottom"
Name="Legend1" Title="销量分析">
13 </asp:Legend>
14 </Legends>
15 <Titles>
16 <asp:Title Font="微软雅黑, 16pt" Name="Title1" Text="法国皇家龙船总体销售评估表">
17 </asp:Title>
18 </Titles>
19 </asp:Chart>
20 </div>
后台 主要 源码：
1 ///<summary>
2 /// 绑定报表控件数据源
3 ///</summary>
4 publicvoid BindData()
5
{
6 IList<Nop_Product> data =
BindChartProduct();
7 #region 尚未用到
8 //ChartArea chartArea =
SetChartAreaStyle("Chart1", true);
9 //List<int> data = Models.StaticModel.createStaticData();
10 //System.Web.UI.DataVisualization.Charting.Chart Chart2 = new
System.Web.UI.DataVisualization.Charting.Chart();
11 //Chart2.Width = 412;
12 //Chart2.Height = 296;
13 //Chart2.RenderType =
System.Web.UI.DataVisualization.Charting.RenderType.ImageTag;
14 //Chart2.Palette = ChartColorPalette.BrightPastel;
15 //Title t = new Title("IMG source streamed from Controller",
Docking.Top, new System.Drawing.Font("Trebuchet MS", 14,
System.Drawing.FontStyle.Bold), System.Drawing.Color.FromArgb(26, 59, 105));
16 //Chart2.Titles.Add(t);
17 //Chart2.ChartAreas.Add("Series 1");
18 ////Populate series with random data
19 //Random random = new Random();
20 //for (int pointIndex = 0; pointIndex < 10; pointIndex++)
21 //{
22 //
Chart1.Series[0].Points.AddY(random.Next(45, 95));
23 ////Chart1.Series["Series2"].Points.AddY(random.Next(5, 75));
24 //}
25 #endregion
26 for (int i =0; i < data.Count; i++)
27 {
28
Chart1.Series[0].Points.AddY(data[i].Quantity);
29 }
30
Chart1.BorderSkin.SkinStyle = BorderSkinStyle.Emboss;
31 Chart1.BorderlineWidth =2;
32 Chart1.BorderColor =
System.Drawing.Color.Black;
33 Chart1.BorderlineDashStyle
= ChartDashStyle.Solid;
34 Chart1.BorderWidth =2;
35
Chart1.ChartAreas["ChartArea1"].AxisX.MajorGrid.Enabled
=false;//不显示竖着的分割线
36
Chart1.ChartAreas["ChartArea1"].AxisY.Title ="销售数量(瓶)";
37
Chart1.ChartAreas["ChartArea1"].AxisX.Title ="时间(yyyy-MM)";
38 #region 尚未用到
39 //Chart1.Legends.Add("酒种类");
40 //Legend legend = new Legend(ddrTypeName.SelectedValue);
41 //26, 59, 105
42 //legend.BackColor = Color.Transparent;//Color.FromArgb(26, 59, 105, 0);
43 //legend.BorderColor = Color.Gray;
44 //legend.Font = new System.Drawing.Font("Trebuchet MS",
float.Parse("8.25"), FontStyle.Bold, GraphicsUnit.World);
45 //legend.IsDockedInsideChartArea = true;
46 //legend.DockedToChartArea = ddrTypeName.SelectedValue;
47 //Chart1.ChartAreas["ChartArea1"].AxisX.Interval = 1; //X轴数据显示间隔
48 //Chart1.ChartAreas["ChartArea1"].AxisX.IntervalType =
DateTimeIntervalType.Days;
49 //Chart1.ChartAreas["ChartArea1"].AxisX.IntervalOffset = 0.0;
50 //Chart1.ChartAreas["ChartArea1"].AxisX.IntervalOffsetType =
DateTimeIntervalType.Days;
51 #endregion
52
Chart1.ChartAreas["ChartArea1"].AxisX.LabelStyle.Format
="yyyy年MM月";
53
Chart1.ChartAreas["ChartArea1"].AxisY.Interval =20;//y轴数据显示间隔
54 Chart1.DataSource = data;
55
Chart1.Series[0].YValueMembers ="Quantity";
56
Chart1.Series[0].XValueMember ="CreatedOn";
57 Chart1.DataBind();
58 // Set series chart type
59 Chart1.Series[0].ChartType =
SeriesChartType.Line;
60 //Chart1.Series["Series2"].ChartType = SeriesChartType.Spline;
61 // Set point labels
62
Chart1.Series[0].IsValueShownAsLabel =true;
63 //Chart1.Series["Series2"].IsValueShownAsLabel = true;
64 // Enable X axis margin
65
Chart1.ChartAreas["ChartArea1"].AxisX.IsMarginVisible =true;
66 // Enable 3D, and show data point marker lines
67
Chart1.ChartAreas["ChartArea1"].Area3DStyle.Enable3D =false;
68 Chart1.Series[0]["ShowMarkerLines"]
="True";
69 //Chart1.Series["Series2"]["ShowMarkerLines"] =
"True";
效果图如下：
在此，只写出自己研究所得. 如有不当之处，希望大家多多指教，共同进步. 谢谢
http://www.cnblogs.com/axing/archive/2011/05/09/MSChart.html
这几天都在研究微软才发布的MSChart图表工具，我写了简单的例子发上来让大家看看。
使用前需要做得工作：1.把.net平台升级为3.5sp1的。
2.安装MSChart控件。
3.在使用时必须在项目中的web.canfig中添加一些内容；
<appSettings>
<add key="ChartImageHandler" value="Storage=file;Timeout=20;Url=~/tempImages/;"/>
</appSettings>
<httpHandlers>
<add path="ChartImg.axd" verb="GET,HEAD" type="System.Web.UI.DataVisualization.Charting.ChartHttpHandler, System.Web.DataVisualization, Version=3.5.0.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" validate="false"/>
</httpHandlers>
<handlers>
<remove name="ChartImageHandler"/>
<add name="ChartImageHandler" preCondition="integratedMode" verb="GET,HEAD" path="ChartImg.axd" type="System.Web.UI.DataVisualization.Charting.ChartHttpHandler, System.Web.DataVisualization, Version=3.5.0.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"/>
</handlers>
这样我们就可以使用控件来画图表了
我在实例中主要对实例2做了详细的说明，实例1是ms上的例子！
前台代码：
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="test1.aspx.cs" Inherits="webchart_test1.test1" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>无标题页</title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:Chart ID="Chart1" runat="server" Height="296px" Width="412px" ImageLocation="~/TempImages/ChartPic_#SEQ(300,3)"
Palette="BrightPastel" ImageType="Png" BackSecondaryColor="White" BackGradientStyle="TopBottom"
BorderWidth="2" BackColor="#D3DFF0" BorderColor="26, 59, 105" AntiAliasing="None"
BorderlineDashStyle="Solid">
<Legends>
<asp:Legend IsTextAutoFit="False" Name="Default" BackColor="Transparent" Font="Trebuchet MS, 8.25pt, style=Bold">
</asp:Legend>
</Legends>
<BorderSkin SkinStyle="Emboss"></BorderSkin>
<Series>
<asp:Series Name="Column" BorderColor="Fuchsia" Color="Green">
<Points>
<asp:DataPoint YValues="45" />
<asp:DataPoint YValues="34" />
<asp:DataPoint YValues="67" />
<asp:DataPoint YValues="31" />
<asp:DataPoint YValues="27" />
<asp:DataPoint YValues="87" />
<asp:DataPoint YValues="45" />
<asp:DataPoint YValues="32" />
</Points>
</asp:Series>
</Series>
<ChartAreas>
<asp:ChartArea Name="ChartArea1" BorderColor="64, 64, 64, 64" BorderDashStyle="Solid"
BackSecondaryColor="White" BackColor="64, 165, 191, 228" ShadowColor="Transparent"
BackGradientStyle="TopBottom">
<Position Auto="true"/>
<Area3DStyle Rotation="10" Perspective="10" Inclination="15" IsRightAngleAxes="False"
WallWidth="0" IsClustered="False"></Area3DStyle>
<AxisY LineColor="Lime">
<LabelStyle Font="Trebuchet MS, 8.25pt, style=Bold" />
<MajorGrid LineColor="red" />
</AxisY>
<AxisX LineColor="Blue">
<LabelStyle Font="Trebuchet MS, 8.25pt, style=Bold" />
<MajorGrid LineColor="red" />
</AxisX>
</asp:ChartArea>
</ChartAreas>
</asp:Chart>
<asp:Chart ID="chart2" runat="server" BackColor="#FFFFCC" Palette="BrightPastel" BorderWidth = "2" BorderColor = "#cc9900" >
<Legends>
<asp:Legend IsTextAutoFit="False" Name="Default" BackColor="Transparent" Font="Trebuchet MS, 8.25pt, style=Bold">
</asp:Legend>
</Legends> <%-- 控制小图标的显示格式 --%>
<BorderSkin ></BorderSkin> <%--<!--控制整个图片边缘的格式 -->--%>
<Series><%-- 数据(一个数据集为<asp:Series></asp:Series>) --%>
</Series>
<ChartAreas> <%-- 作图区的修饰 --%>
<asp:ChartArea Name="ChartArea1">
</asp:ChartArea>
</ChartAreas>
</asp:Chart>
</div>
</form>
</body>
</html>
后台代码：
using System;
using System.Collections;
using System.Configuration;
using System.Data;
using System.Linq;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.HtmlControls;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Xml.Linq;
using System.Web.UI.DataVisualization.Charting;
using System.Drawing;
namespace webchart_test1
{
public partial class test1 : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
// Create new data series and set it's visual attributes
//////////////////////////////////////实验1///////////////////////////////////////////////
Series series = new Series("曲线");
series.ChartType = SeriesChartType.Spline;
series.BorderWidth = 3;
series.ShadowOffset = 2;
// Populate new series with data
series.Points.AddY(167);
series.Points.AddY(157);
series.Points.AddY(183);
series.Points.AddY(123);
series.Points.AddY(170);
series.Points.AddY(160);
series.Points.AddY(190);
series.Points.AddY(120);
series["ShowMarkerLines"] = "true";
// Add series into the chart's series collection
Chart1.Series.Add(series);
Title t = new Title("一个小实验");
Chart1.Titles.Add(t);
//////////////////////////////////////////////////实例2/////////////////////////////////////////////////////
//************************************绘图区********************************************
//chart 代表整个图片； legends 代表数据显示标识； Series 图片中的数据集； ChartAreas 代表图片中的绘图区（里面能包含多个Series数据集的显示）；
//数据源
int[] test = { 100, 70, 40, 30, 20, 60, 50, 30, 50, 90, 80, 70, 90, 10, 80, 60, 50, 40, 30, 20, 10, 30 }; //内销
int[] test1 = { 80, 70, 90, 10, 80, 60, 50, 40, 30, 20, 10, 0, 50, 90,100, 70, 40, 30, 20, 60, 50, 30 }; //出口
//图片属性设置
chart2.Width = (test.Count() * 25 + 200) >= 600 ? test.Count() * 25 + 200 : 600; //图片宽度
chart2.Height = 400; //图片高度
chart2.BackColor = Color.Azure; //图片背景色
Title t2 = new Title("试验2"); //图片标题
chart2.Titles.Add(t2);
//数据集显示属性设置
//数据集"出口"显示属性设置
Series series1 = new Series("出口"); //数据集声明
series1.ChartType = SeriesChartType.Line; //数据显示方式 Line:为折线 Spline:曲线
series1.Color = Color.Green; //线条颜色
series1.BorderWidth = 2; //线条宽度
series1.ShadowOffset = 1; //阴影宽度
series1.IsVisibleInLegend = true; //是否显示数据说明
series1.IsValueShownAsLabel = false; //线条上是否给吃数据的显示
series1.MarkerStyle = MarkerStyle.Circle; //线条上的数据点标志类型
series1.MarkerSize = 8; // 标志的大小
DateTime date1 = DateTime.Now.Date;
for (int i = 0; i < test1.Count(); i++) //向数据集绑定数据
{
series1.Points.AddXY(date1, test1[i]); //分别往X,Y轴添加数据(可以为多种类型) （有多中添加方式）
date1 = date1.AddDays(1);
}
chart2.Series.Add(series1); //把数据集添加到chart中
//数据集"内销"显示属性设置
Series series2 = new Series("内销");
series2.ChartType = SeriesChartType.Line; //数据显示方式 Line:为折线 Spline:曲线
series2.Color = Color.Red; //线条颜色
series2.BorderWidth = 2; //线条宽度
series2.ShadowOffset = 1; //阴影宽度
series2.IsVisibleInLegend = true; //是否显示数据说明
series2.IsValueShownAsLabel = false; //线条上是否给吃数据的显示
series2.MarkerStyle = MarkerStyle.Circle; //线条上的数据点标志类型
series2.MarkerSize = 8; // 标志的大小
DateTime date = DateTime.Now.Date;
for (int i = 0; i < test.Count(); i++)
{
series2.Points.AddXY(date, test[i]);
date = date.AddDays(1);
}
chart2.Series.Add(series2);
//作图区的显示属性设置
chart2.ChartAreas["ChartArea1"].AxisX.IsMarginVisible = false;
chart2.ChartAreas["ChartArea1"].Area3DStyle.Enable3D = false;
//背景色设置
chart2.ChartAreas["ChartArea1"].ShadowColor = Color.Transparent;
chart2.ChartAreas["ChartArea1"].BackColor = Color.Azure; //该处设置为了由天蓝到白色的逐渐变化
chart2.ChartAreas["ChartArea1"].BackGradientStyle = GradientStyle.TopBottom;
chart2.ChartAreas["ChartArea1"].BackSecondaryColor = Color.White;
//X,Y坐标线颜色和大小
chart2.ChartAreas["ChartArea1"].AxisX.LineColor = Color.Blue;
chart2.ChartAreas["ChartArea1"].AxisY.LineColor = Color.Blue;
chart2.ChartAreas["ChartArea1"].AxisX.LineWidth = 2;
chart2.ChartAreas["ChartArea1"].AxisY.LineWidth = 2;
chart2.ChartAreas["ChartArea1"].AxisY.Title = "百分比";
//中间X,Y线条的颜色设置
chart2.ChartAreas["ChartArea1"].AxisX.MajorGrid.LineColor = Color.Blue;
chart2.ChartAreas["ChartArea1"].AxisY.MajorGrid.LineColor = Color.Blue;
//X.Y轴数据显示间隔
chart2.ChartAreas["ChartArea1"].AxisX.Interval = 1; //X轴数据显示间隔
chart2.ChartAreas["ChartArea1"].AxisY.Interval = 10;
//X轴线条显示间隔
chart2.ChartAreas["ChartArea1"].AxisX.MajorGrid.Interval = 1;
//********************************************************************************************
}
}
}
实例2的图片效果：
图片不是很花哨，但是看起来很整洁！有什么意见随便提，我第一次发首页！！！！
http://www.cnblogs.com/bluetiger/archive/2009/03/02/1401457.html
浙公网安备 33010602011771号