chart（图表）控件的使⽤-System.Windows.Forms.DataV。
。。
这个案例指在介绍微软这套免费⼜功能强⼤的图表控件Microsoft Chart Controls for Microsoft .NET Framework 3.5，通过它，可让您的项⽬及报表，轻松套⽤各种功能强⼤的 2D、3D、实时变化的动态图表；且透过 AJAX，可让图表及⾥⾯的数据，每秒钟都持续更新；使⽤者透过浏览器，可和图表做各种互动设定
下⾯结合BBVS项⽬中温度功能模块中温度曲线的绘制做了如下Demo，供⼤家学习微软的这款功能强⼤的图标控件，这⾥只是起⼀个抛砖引⽟的作⽤，更多更好玩的功能还等⼤家不断进⼀步去挖掘！
⾸先，让⼤家瞧瞧Chart控件的庐⼭真⾯⽬和组成吧，不然有些对不住⼤家，呵呵
⼀、需引⽤的DLL
要想利⽤这个功能强⼤的控件，⾸先必须引⽤以下DLL和相关⽂件:
1. 在WinForm应⽤程序中要想使⽤该图表控件，需引⽤如下DLL:
System.Windows.Forms.DataVisualization.Design.dll
System.Windows.l
2. 在Web应⽤程序中要想使⽤该图表控件，需引⽤如下DLL:
System.l
⼆、采⽤WinForm程序使⽤该图表控件
1. 创建⼀个WinForm⼯程: DemoCollection
2. 添加⼀个Form窗体: FrmChartDemo
3. 添加所需的DLL引⽤
4. 在该窗体的Load事件函数中动态创建好Chart对象实例
5. 添加⼀个Timer控件，在Timer控件的Tick事件函数中向Chart中添加坐标值(X值和Y值)，然后在窗体中绘制出来.
6. FrmChartDemo的后台代码如下:
FrmChartDemo.cs:
View Code
using System.Windows.Forms.DataVisualization.Charting;
namespace DemoCollection
{
public partial class FrmChartDemo : Form
{
#region the variable definiton
private Chart chart1;
private Random random = new Random();
private int maxYValue = 20;
private int minYValue = 0;
#endregion
#region Ctor
public FrmChartDemo()
{
InitializeComponent();
this.Load += new EventHandler(FrmChartDemo_Load);
this.timer1.Tick += new EventHandler(timer1_Tick);
}
#endregion
#region the event handler
void FrmChartDemo_Load(object sender, EventArgs e)
{
#region from BBVS porject
// Create a Chart
chart1 = new Chart();
// Create Chart Area
ChartArea chartArea1 = new ChartArea();
// Add Chart Area to the Chart
chart1.ChartAreas.Add(chartArea1);
ajax实例里面的函数#region Set the Chart
// Set the chart style
chart1.BackGradientStyle = System.Windows.Forms.DataVisualization.Charting.GradientStyle.TopBottom;
chart1.BackSecondaryColor = System.Drawing.Color.White;
chart1.BorderlineColor = System.Drawing.Color.FromArgb(((int)(((byte)(26)))), ((int)(((byte)(59)))), ((int)(((byte)(105)))));
chart1.BorderlineDashStyle = System.Windows.Forms.DataVisualization.Charting.ChartDashStyle.Solid;
chart1.BorderlineWidth = 2;
chart1.BorderSkin.SkinStyle = System.Windows.Forms.DataVisualization.Charting.BorderSkinStyle.Emboss;
chart1.BackColor = Color.SteelBlue;
chart1.Dock = DockStyle.Fill;
chartArea1.Area3DStyle.Inclination = 15;
chartArea1.Area3DStyle.IsClustered = true;
chartArea1.Area3DStyle.IsRightAngleAxes = false;
chartArea1.Area3DStyle.Perspective = 10;
chartArea1.Area3DStyle.Rotation = 10;
chartArea1.Area3DStyle.WallWidth = 0;
// 设置是否启⽤ 3D 效果
//chartArea1.Area3DStyle.Enable3D = true;
chartArea1.AxisX.LabelStyle.Font = new System.Drawing.Font("Trebuchet MS", 8.25F, System.Drawing.FontStyle.Bold);
chartArea1.AxisX.LabelStyle.Format = "hh:mm:ss";
chartArea1.AxisX.LabelStyle.Interval = 5D; // 10D;
chartArea1.AxisX.LabelStyle.IntervalType = System.Windows.Forms.DataVisualization.Charting.DateTimeIntervalType.Seconds;
chartArea1.AxisX.LineColor = System.Drawing.Color.FromArgb(((int)(((byte)(64)))), ((int)(((byte)(64)))), ((int)(((byte)(64)))), ((int)(((byte) (64))))); chartArea1.AxisX.MajorGrid.Interval = 5D; // 10D;
chartArea1.AxisX.MajorGrid.IntervalType = System.Windows.Forms.DataVisualization.Charting.DateTimeIntervalType.Seconds;
chartArea1.AxisX.MajorGrid.LineColor = System.Drawing.Color.FromArgb(((int)(((byte)(64)))), ((int)(((byte)(64)))), ((int)(((byte) (64)))), ((int)(((byte)(64))))); chartArea1.AxisX.MajorTickMark.Interval = 5D; // 10D;
chartArea1.AxisX.MajorTickMark.IntervalType = System.Windows.Forms.DataVisualization.Charting.DateTimeIntervalType.Seconds; chartArea1.AxisY.IsLabelAutoFit = false; chartArea1.AxisY.IsStartedFromZero = false;
chartArea1.AxisY.LabelStyle.Font = new System.Drawing.Font("Trebuchet MS", 8.25F, System.Drawing.FontStyle.Bold);
chartArea1.AxisY.LineColor = System.Drawing.Color.FromArgb(((int)(((byte)(64)))), ((int)(((byte)(64)))), ((int)(((byte)(64)))), ((int)(((byte) (64))))); chartArea1.AxisY.MajorGrid.LineColor = System.Drawi
ng.Color.FromArgb(((int)(((byte)(64)))), ((int)(((byte)(64)))), ((int)(((byte) (64)))), ((int)(((byte)(64))))); #region 设置 Y 轴的最⼤值和最⼩值 chartArea1.AxisY.Maximum = this.maxYValue + 6;
chartArea1.AxisY.Minimum = this.minYValue - 6; #endregion
chartArea1.BackColor = System.Drawing.Color.FromArgb(((int)(((byte)(64)))), ((int)(((byte)(165)))), ((int)(((byte)(191)))), ((int)(((byte) (228))))); chartArea1.BackGradientStyle = System.Windows.Forms.DataVisualization.Charting.GradientStyle.TopBottom;
chartArea1.BackSecondaryColor = System.Drawing.Color.White;
chartArea1.BorderColor = System.Drawing.Color.FromArgb(((int)(((byte)(64)))), ((int)(((byte)(64)))), ((int)(((byte)(64)))), ((int)(((byte) (64))))); chartArea1.BorderDashStyle = System.Windows.Forms.DataVisualization.Charting.ChartDashStyle.Solid;
chartArea1.InnerPlotPosition.Auto = false; chartArea1.InnerPlotPosition.Height = 85F;
chartArea1.InnerPlotPosition.Width = 86F; chartArea1.InnerPlotPosition.X = 8.3969F;
chartArea1.InnerPlotPosition.Y = 3.63068F; chartArea1.Name = "Default"; chartArea1.Position.Auto = false;
chartArea1.Position.Height = 86.76062F; chartArea1.Position.Width = 88F; chartArea1.Position.X = 5.089137F;
chartArea1.Position.Y = 5.895753F; chartArea1.ShadowColor = System.Drawing.Color.Transparent; #endregion
#region Create a Legend Legend legend1 = new Legend(); legend1.Alignment = System.Drawing.StringAlignment.Far; legend1.BackColor = System.Drawing.Color.Transparent; legend1.DockedToChartArea = "Default";
legend1.Docking = System.Windows.Forms.DataVisualization.Charting.Docking.Top;
legend1.Font = new System.Drawing.Font("Trebuchet MS", 8.25F, System.Drawing.FontStyle.Bold);
legend1.IsTextAutoFit = false; legend1.LegendStyle = System.Windows.Forms.DataVisualization.Charting.LegendStyle.Row; legend1.Name = "Default"; chart1.Legends.Add(legend1); #endregion #region Create a Series
Series series1 = new Series(); series1.BorderColor = System.Drawing.Color.FromArgb(((int)(((byte)(180)))), ((int)(((byte) (26)))), ((int)(((byte)(59)))), ((int)(((byte)(105))))); series1.ChartArea
= "Default";
series1.ChartType = System.Windows.Forms.DataVisualization.Charting.SeriesChartType.FastLine;//Line;
series1.Color = System.Drawing.Color.FromArgb(((int)(((byte)(224)))), ((int)(((byte)(64)))), ((int)(((byte)(10)))));
series1.Legend = "Default"; series1.Name = "Series1"; series1.ShadowOffset = 1; series1.YValuesPerPoint = 2; chart1.Series.Add(series1); // 设置是否在 Chart 中显⽰坐标点值 series1.IsValueShownAsLabel = true;
#endregion // Set chart control location chart1.Location = new System.Drawing.Point(0, 0);
// Add chart control to the form this.Controls.AddRange(new System.Windows.Forms.Control[] { this.chart1 });
#endregion } void timer1_Tick(object sender, EventArgs e) { double tempValue = 0.0; // 随机产⽣温度值 tempValue = random.Next(this.minYValue, this.maxYValue);
DateTime timeStamp = DateTime.Now;
double xValue = DateTime.Now.ToOADate(); // 向 Chart中添加 X轴和 Y轴的值
chart1.Series["Series1"].Points.AddXY(xValue, tempValue); // remove all points from the source series older than 20 seconds. double removeBefore = timeStamp.AddSeconds((double)(20) * (-1)).ToOADate();
//remove oldest values to maintain a constant number of data points if (chart1.Series[0].Points.Count > 0) {
while (chart1.Series[0].Points[0].XValue < removeBefore) { chart1.Series[0].Points.RemoveAt(0); }
chart1.ChartAreas[0].AxisX.Minimum = chart1.Series[0].Points[0].XValue;
chart1.ChartAreas[0].AxisX.Maximum = DateTime.FromOADate(chart1.Series[0].Points[0].XValue).AddSeconds(20).ToOADate(); } else { //chart1.ChartAreas[0].AxisX.Minimum = (double)minTempThreshold;
/
/chart1.ChartAreas[0].AxisX.Maximum = (double)maxTempThreshold; } chart1.Invalidate(); } #endregion } }
–
这个只有英⽂的，没到中⽂的。
的例⼦（Samples Environment for Microsoft Chart Controls） – 这个只有英⽂的，没到英⽂的。
Demo 下载：
下了它的⽰例程序后，运⾏了⼀下，⾮常的强⼤，可以⽀持各种各样的图形显⽰，常见的：点状图、饼图、柱状图、曲线图、⾯积图、排列图等等，同时也⽀持3D样式的图表显⽰，不过我觉得最有⽤的功能还是⽀持图形上各个点的属性操作，它可以定义图形上各个点、标签、图形的提⽰信息（Tooltip）以及超级链接、Javascript动作等，⽽不是像其它图形类库仅⽣成⼀幅图⽚⽽已，通过这些，加上微软⾃⼰的Ajax 框架，可以建⽴⼀个可以互动的图形统计报表了。⼀。安装控件的安装相对⽐较简单，下载完后，先执⾏“”程序，它会⾃动检测你的环境，安装到系统⽬录中去，如果要在VS 2008环境中直接使⽤，那么需要安装For Vs2008的插
件，，还有⼀个中⽂语⾔包。安装完后，打开Vs
2008，在建⽴项⽬的时候，你就能在⼯具栏中看到有⼀个.NET3.5的Web项⽬，像使⽤普通控件⼀样拖放到要使⽤的Web界⾯即可。初步研究了⼀下，整个图形控件主要由以下⼏个部份组成： 1.Annotations --图形注解集合 2.ChartAreas --图表区域集合 3.Legends --图例集合 4.Series --图表序列集合（即图表数据对象集合） 5.Titles --图标的标题集合 Annotations注解集合 Annotations是⼀个对图形的⼀些注解对象的集合，所谓注解对象，类似于对某个点的详细或者批注的说明，⽐如，在图⽚上实现各个节点的关键信息，如下图⽅框和黄⾊的⼩⽅框：⼀个图形上可以拥有多个注解对象，可以添加⼗多种图形样式的注解对象，包括常见的箭头、云朵、矩⾏、图⽚等等注解符号，通过各个注解对象的属性，可以⽅便的设置注解对象的放置位置、呈现的颜⾊、⼤⼩、⽂字内容样式等常见的属性。 ChartAreas图表区域集合 ChartAreas可以理解为是⼀个图表的绘图区，例如，你想在⼀幅图上呈现两个不同属性的内容，⼀个是⽤户流量，另⼀个则是系统资源占⽤情况，那么你要在⼀个图形上绘制这两种情况，明显是不合理的，对于这种情况，可以建⽴两个ChartArea，⼀个⽤于呈现⽤户流量，另⼀个则⽤于呈现系统资源的占⽤
情况。当然了，图表控件并不限制你添加多少个绘图区域，你可以根据你的需要进⾏添加。对于每⼀个绘图区域，你可以需要注意的是，绘图区域只是⼀个可以作图的区域范围，它本⾝并不包含要作图形的各种属性数据。多绘图区效果图如下，分为上下两个绘图区域，分别表⽰不同的绘图数据： Legends图例集合 Legends是⼀个图例的集合，即标注图形中各个线条或颜⾊的含义，同样，⼀个图⽚也可以
包含多个图例说明，⽐如像上⾯说的多个图表区域的⽅式，则可以建⽴多个图例，每别说明各个绘图区域的信息，具体的图例配置说明此处就不详细说明了，可以参考⼀下官⽹的例⼦，写得丰富的详细了：）也上⼀张图例的效果图吧~ Series图表序列图表序列，应该是整个绘图中最关键的内容了，通俗点说，即是实际的绘图数据区域，实际呈现的图形形状，就是由此集合中的每⼀个图表来构成的，可以往集合⾥⾯添加多个图表，每⼀个图表可以有⾃⼰的绘制形状、样式、独⽴的数据等。需要注意的是，每⼀个图表，你可以指定它的绘制区域（见ChartAreas的说明），让此图表呈现在某个绘图区域，也可以让⼏个图表在同⼀个绘图区域叠加，如下图：上⾯两幅图，分别表⽰了把图表放在不同的绘制区域和放在同⼀个绘制区域的情况。继续回到ChartAreas章节举的例⼦，同时要显⽰⽤户的流量还要显⽰系统的占⽤情况，对于这种时候，应该建⽴两个Series，⼀个⽤于呈现⽤户的流量，另⼀个则⽤于呈现系统的占⽤情况。它们分别属于各⾃的绘图区域。Titles标题合集根据字⾯含义即可以理解，是图表的标题配置，同样可以添加多个标题，以及设置标题的样式及⽂字、位置等属性。多看⼀下它的属性即能明⽩各⾃的含义。三。其它属性相对来说，我觉得⽐较有⽤的属性有三个，分别是：Label、Tooltip以及Url链接。Label即标签的含义，可以在图⽚的关键位置进⾏⼀些关键数字或⽂字的描述，如下图：像上图：X轴和Y轴的⽂字便是标签，以及图表曲线中的红点上的⽂字，也是标签，添加了标签，可以让⼈更容易的对内容进⾏理解。 Tooltip即提⽰的含义，⽤于在各个关键点，如：标签、图形关键点、标题等当⿏标移动上去的时候，提⽰⽤户⼀些相关的详细或说明信息，例如上图，可以给曲线中的每⼀个点增加Tooltip的属性，写上需要详细说明的内容，⽐如：详细的销售明细，那么，在⿏标移动到这个点的时候，
会⾃动弹出提⽰信息。 Tooltip可以⽀持简单⽅式以及⾃定义的⽅式，简单⽅式即像平时Html页⾯设置此属性，在⿏标点击的时候，代到其它相应的页⾯去。建议⼤家看看官⽅例⼦中的Interactivity and AJAX部份，很精彩：）例⼦：建⽴⼀个Cpu信息和内存使⽤的实时统计表下⾯写⼀个⼩例⼦，建⽴⼀个系统的内存实时统计图表，使⽤到了Ajax的⽅法，以及Windows Api取得系统内存的⽅法。⾸先，建⽴⼀个Aspx页⾯，拖动⼀个图表控件到页⾯，设置图表控件的EnableViewState属性为True，否则⽆法记录状态。
Code
Code highlighting produced by Actipro CodeHighlighter (freeware)
--><asp:Chart ID="ChartMemory" runat="server" BackColor="LightSteelBlue"
BackGradientStyle="TopBottom" BackSecondaryColor="White" EnableTheming="False"
EnableViewState="True" Height="363px" Width="415px">
<Legends>
<asp:Legend Alignment="Center" Docking="Bottom" Name="Legend1" Title="图例">
</asp:Legend>
</Legends>
<Titles>
<asp:Title Font="微软雅⿊, 16pt" Name="Title1" Text="系统内存监控图表">
</asp:Title>
</Titles>
<Series>
<asp:Series BorderColor="White" BorderWidth="3" ChartArea="ChartArea1"
ChartType="Spline" Legend="Legend1" Name="已使⽤物理内存" XValueType="Double"
YValueType="Double">
</asp:Series>
<asp:Series BorderWidth="3" ChartArea="ChartArea1" ChartType="Spline"
Legend="Legend1" Name="全部占⽤内存">
</asp:Series>
<asp:Series ChartArea="ChartArea2" ChartType="StackedArea" Legend="Legend1"
Name="CPU">
</asp:Series>
</Series>
<ChartAreas>
<asp:ChartArea BackColor="224, 224, 224" BackGradientStyle="LeftRight"
Name="ChartArea1">
</asp:ChartArea>
<asp:ChartArea Name="ChartArea2">
</asp:ChartArea>
</ChartAreas>
</asp:Chart>
⼀共建⽴了两个绘图区，⼀个⽤于呈现内存使⽤情况的在ChartArea1区域，另⼀个则是呈现Cpu使⽤情况的，放置在ChartArea2区域了。⼀共有三个图表，分别表⽰已使⽤的物理内存、全部占⽤的物理内存，以及Cpu使⽤显⽰的情况。添加⼀个Ajax的计时器以及Ajax的ScriptManager，UpdatePanel，把计时器和图表控件都拖进UpdatePanel⾥⾯。设置计时器的间隔时间为⼀秒钟（1000），双击计时器，写如下代码：
Code highlighting produced by Actipro CodeHighlighter (freeware)
static PerformanceCounter pc = new PerformanceCounter("Processor", "% Processor Time", "_Total");
protected void Timer1_Tick(object sender, EventArgs e)
{
MEMORY_INFO MemInfo = new MEMORY_INFO();
ComputerInfo.GlobalMemoryStatus(ref MemInfo);
//UseMemory
Series series = ChartMemory.Series[0];
int xCount = series.Points.Count == 0 ? 0 : series.Points.Count - 1;
double lastXValue = series.Points.Count == 0 ? 1 : series.Points[xCount].XValue + 1;
double lastYValue = (double)(MemInfo.dwTotalPhys-MemInfo.dwAvailPhys)/1024/1024;
series.Points.AddXY(lastXValue, lastYValue);
//Total Memory
series = ChartMemory.Series[1];
lastYValue = (double)(MemInfo.dwTotalVirtual+MemInfo.dwTotalPhys-MemInfo.dwAvailPhys - MemInfo.dwAvailVirtual)/1024/1024; series.Points.AddXY(lastXValue, lastYValue);
//CPU
series = ChartMemory.Series[2];
lastYValue = (double)pc.NextValue();
series.Points.AddXY(lastXValue, lastYValue);
// Remove points from the left chart side if number of points exceeds 100.
while (this.ChartMemory.Series[0].Points.Count > 80)
{
// Remove series points
foreach (Series s in this.ChartMemory.Series)
{
s.Points.RemoveAt(0);
}
}
// Adjust categorical scale
double axisMinimum = this.ChartMemory.Series[0].Points[0].XValue;
this.ChartMemory.ChartAreas[0].AxisX.Minimum = axisMinimum;
this.ChartMemory.ChartAreas[0].AxisX.Maximum = axisMinimum + 99;
}
附上取得内存信息的类代码：
Code
Code highlighting produced by Actipro CodeHighlighter (freeware)
///<summary>
///取得计算机的系统信息
///</summary>
public class ComputerInfo
{
///<summary>
///取得Windows的⽬录
///</summary>
///<param name="WinDir"></param>
///<param name="count"></param>
[DllImport("kernel32")]
public static extern void GetWindowsDirectory(StringBuilder WinDir, int count);
///<summary>
///获取系统路径
///</summary>
///<param name="SysDir"></param>
///<param name="count"></param>
[DllImport("kernel32")]
public static extern void GetSystemDirectory(StringBuilder SysDir, int count);
///<summary>
///取得CPU信息
/
//</summary>
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论