(原创)用Microsoft Chart Controls（MSChart）实现曲线图，并支持拖动放大到秒

最新推荐文章于 2018-12-09 19:55:00 发布
最新推荐文章于 2018-12-09 19:55:00 发布
阅读量103 收藏
点赞数
原文链接：http://www.cnblogs.com/zdh8675/p/3343019.html
版权

Microsoft Chart Controls（简称MSChart）控件，给图形统计和报表图形显示提供了很好的解决办法，同时支持Web和WinForm两种方式。

MSChart 在.NET 4.0自带的有，.NET 3.5 需要下载相应的插件（如果用的是VS2010做开发但是选择的版本是3.5的而不是默认的4.0话，请按本文介绍的.NET 3.5 进行插件安装），

官方例子（web和winform）：http://archive.msdn.microsoft.com/mschart/Release/ProjectReleases.aspx?ReleaseId=4418

插件下载地址：http://archive.msdn.microsoft.com/mschart，把下面四个下载完成后把前三个按顺序安装

 安装完成之后，在C:\Program Files\Microsoft Chart Controls\Assemblies可以获取到web和winform的DLL。对于.NET 3.5 只需要把 System.Windows.Forms.DataVisualization.dll 添加到工具箱即可获得图表控件。前台只需要从工具箱拖一个Chart控件即可，如下图所示：

 本文用MSChart实现Winform曲线图的绘制，本文结合自己的实际项目，每个点需要显示到秒（这也是本文需要解决的关键点），刚开始照着网上的例子实现了一下，样子是出来了，但是当数据一多并且显示到秒时用鼠标进行拖动放大页面会直接卡死，后来经过自己的一番探索和研究，终于把这个问题给解决了，故把整个实现过程记录下来，和大家分享一下。

在文章的后面附上了源码，源码有详细的代码注释，一些需要注意的属性设置都有说明，可以实现刻度到秒的拖动放大，两条红色分别我定义是Min和Max值基准，是为了表达一个区间的概念。页面上绘制了一千个点，每个点上有相应的ToolTip提示。代码没有做拆分，只是把整个创建及设置的流程给描述下来，是为了让需要的朋友更好的理解和使用，第一次写博文，希望大家给予指正与支持，谢谢。

附上效果图：

附上后台源码：

using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Data;
using System.Drawing;
using System.Linq;
using System.Text;
using System.Windows.Forms;
using System.Windows.Forms.DataVisualization.Charting;
using Hyet.Dal;
using Hxj.Model;
using Hxj.Data;
using System.Collections;
using Hyet.BLL;

namespace DigitalFactory.ReportForms
{
    public partial class ChartInfo : Form
    {
        public ChartInfo()
        {
            InitializeComponent();

            InitializeChart();

            this.myChart.GetToolTipText += new EventHandler<ToolTipEventArgs>(myChart_GetToolTipText);
        }

        private void InitializeChart()
        {
            myChart.ChartAreas.Clear();
            myChart.Series.Clear();

            #region 设置图表的属性
            //图表的背景色
            myChart.BackColor = Color.FromArgb(211, 223, 240);
            //图表背景色的渐变方式
            myChart.BackGradientStyle = GradientStyle.TopBottom;
            //图表的边框颜色、
            myChart.BorderlineColor = Color.FromArgb(26, 59, 105);
            //图表的边框线条样式
            myChart.BorderlineDashStyle = ChartDashStyle.Solid;
            //图表边框线条的宽度
            myChart.BorderlineWidth = 2;
            //图表边框的皮肤
            myChart.BorderSkin.SkinStyle = BorderSkinStyle.Emboss;
            #endregion

            #region 设置图表的标题
            Title title = new Title();
            //标题内容
            title.Text = "曲线图";
            //标题的字体
            title.Font = new System.Drawing.Font("Microsoft Sans Serif", 12, FontStyle.Bold);
            //标题字体颜色
            title.ForeColor = Color.FromArgb(26, 59, 105);
            //标题阴影颜色
            title.ShadowColor = Color.FromArgb(32, 0, 0, 0);
            //标题阴影偏移量
            title.ShadowOffset = 3;
            myChart.Titles.Add(title);
            #endregion

            #region 设置图例的属性
            //注意，需要把原来控件自带的图例删除掉
            this.myChart.Legends.Clear();

            Legend legend = new Legend("Default");
            legend.Alignment = StringAlignment.Center;
            legend.Docking = Docking.Bottom;
            legend.LegendStyle = LegendStyle.Column;
            this.myChart.Legends.Add(legend);

            // Add header separator of type line
            legend.HeaderSeparator = LegendSeparatorStyle.Line;
            legend.HeaderSeparatorColor = Color.Gray;

            LegendCellColumn firstColumn = new LegendCellColumn();
            firstColumn.ColumnType = LegendCellColumnType.SeriesSymbol;
            firstColumn.HeaderText = "Color";
            firstColumn.HeaderBackColor = Color.WhiteSmoke;
            myChart.Legends["Default"].CellColumns.Add(firstColumn);

            // Add Legend Text column
            LegendCellColumn secondColumn = new LegendCellColumn();
            secondColumn.ColumnType = LegendCellColumnType.Text;
            secondColumn.HeaderText = "Name";
            secondColumn.Text = "#LEGENDTEXT";
            secondColumn.HeaderBackColor = Color.WhiteSmoke;
            myChart.Legends["Default"].CellColumns.Add(secondColumn);

            // Add AVG cell column
            LegendCellColumn avgColumn = new LegendCellColumn();
            avgColumn.Text = "#AVG{N2}";
            avgColumn.HeaderText = "Avg";
            avgColumn.Name = "AvgColumn";
            avgColumn.HeaderBackColor = Color.WhiteSmoke;
            myChart.Legends["Default"].CellColumns.Add(avgColumn);

            // Add Total cell column
            LegendCellColumn totalColumn = new LegendCellColumn();
            totalColumn.Text = "#TOTAL{N1}";
            totalColumn.HeaderText = "Total";
            totalColumn.Name = "TotalColumn";
            totalColumn.HeaderBackColor = Color.WhiteSmoke;
            myChart.Legends["Default"].CellColumns.Add(totalColumn);

            // Set Min cell column attributes
            LegendCellColumn minColumn = new LegendCellColumn();
            minColumn.Text = "#MIN{N1}";
            minColumn.HeaderText = "Min";
            minColumn.Name = "MinColumn";
            minColumn.HeaderBackColor = Color.WhiteSmoke;
            myChart.Legends["Default"].CellColumns.Add(minColumn);

            // Set Max cell column attributes
            LegendCellColumn maxColumn = new LegendCellColumn();
            maxColumn.Text = "#MAX{N1}";
            maxColumn.HeaderText = "Max";
            maxColumn.Name = "MaxColumn";
            maxColumn.HeaderBackColor = Color.WhiteSmoke;
            myChart.Legends["Default"].CellColumns.Add(maxColumn);

            #endregion

            #region 设置图表区属性
            ChartArea chartArea = new ChartArea("Default");
            //设置Y轴刻度间隔大小
            chartArea.AxisY.Interval = 5;
            //设置Y轴的数据类型格式
            //chartArea.AxisY.LabelStyle.Format = "C";
            //设置背景色
            chartArea.BackColor = Color.FromArgb(64, 165, 191, 228);
            //设置背景渐变方式
            chartArea.BackGradientStyle = GradientStyle.TopBottom;
            //设置渐变和阴影的辅助背景色
            chartArea.BackSecondaryColor = Color.White;
            //设置边框颜色
            chartArea.BorderColor = Color.FromArgb(64, 64, 64, 64);
            //设置阴影颜色
            chartArea.ShadowColor = Color.Transparent;
            //设置X轴和Y轴线条的颜色
            chartArea.AxisX.LineColor = Color.FromArgb(64, 64, 64, 64);
            chartArea.AxisY.LineColor = Color.FromArgb(64, 64, 64, 64);
            //设置X轴和Y轴线条的宽度
            chartArea.AxisX.LineWidth = 1;
            chartArea.AxisY.LineWidth = 1;
            //设置X轴和Y轴的标题
            chartArea.AxisX.Title = "时间";
            chartArea.AxisY.Title = "数值";
            //设置图表区网格横纵线条的颜色
            chartArea.AxisX.MajorGrid.LineColor = Color.FromArgb(64, 64, 64, 64);
            chartArea.AxisY.MajorGrid.LineColor = Color.FromArgb(64, 64, 64, 64);
            //设置图表区网格横纵线条的宽度
            chartArea.AxisX.MajorGrid.LineWidth = 1;
            chartArea.AxisY.MajorGrid.LineWidth = 1;
            //设置坐标轴刻度线不延长出来
            chartArea.AxisX.MajorTickMark.Enabled = false;
            chartArea.AxisY.MajorTickMark.Enabled = false;
            //开启下面两句能够隐藏网格线条
            //chartArea.AxisX.MajorGrid.Enabled = false;
            //chartArea.AxisY.MajorGrid.Enabled = false;
            //设置X轴的显示类型及显示方式
            chartArea.AxisX.Interval = 0; //设置为0表示由控件自动分配
            chartArea.AxisX.IntervalAutoMode = IntervalAutoMode.VariableCount;
            chartArea.AxisX.IntervalType = DateTimeIntervalType.Minutes;
            chartArea.AxisX.LabelStyle.IsStaggered = true;
            //chartArea.AxisX.MajorGrid.IntervalType = DateTimeIntervalType.Minutes;
            //chartArea.AxisX.LabelStyle.IntervalType = DateTimeIntervalType.Minutes;
            chartArea.AxisX.LabelStyle.Format = "yyyy-MM-dd HH:mm:ss";
            //设置文本角度
            //chartArea.AxisX.LabelStyle.Angle = 45;
            //设置文本自适应
            chartArea.AxisX.IsLabelAutoFit = true;
            //设置X轴允许拖动放大
            chartArea.CursorX.IsUserEnabled = true;
            chartArea.CursorX.IsUserSelectionEnabled = true;
            chartArea.CursorX.Interval = 0;
            chartArea.CursorX.IntervalOffset = 0;
            chartArea.CursorX.IntervalType = DateTimeIntervalType.Minutes;
            chartArea.AxisX.ScaleView.Zoomable = true;
            chartArea.AxisX.ScrollBar.IsPositionedInside = false;

            //设置中短线（还没看到效果）
            //chartArea.AxisY.ScaleBreakStyle.Enabled = true;
            //chartArea.AxisY.ScaleBreakStyle.CollapsibleSpaceThreshold = 47;
            //chartArea.AxisY.ScaleBreakStyle.BreakLineStyle = BreakLineStyle.Wave;
            //chartArea.AxisY.ScaleBreakStyle.Spacing = 2;
            //chartArea.AxisY.ScaleBreakStyle.LineColor = Color.Red;
            //chartArea.AxisY.ScaleBreakStyle.LineWidth = 10;

            myChart.ChartAreas.Add(chartArea);
            #endregion

            //线条2：主要曲线
            Series series = new Series("Default");
            //设置线条类型
            series.ChartType = SeriesChartType.Line;
            //线条宽度
            series.BorderWidth = 1;
            //阴影宽度
            series.ShadowOffset = 0;
            //是否显示在图例集合Legends
            series.IsVisibleInLegend = true;
            //线条上数据点上是否有数据显示
            series.IsValueShownAsLabel = true;
            //线条颜色
            series.Color = Color.MediumPurple;
            //设置曲线X轴的显示类型
            series.XValueType = ChartValueType.DateTime;
            //设置数据点的类型
            series.MarkerStyle = MarkerStyle.Circle;
            //线条数据点的大小
            series.MarkerSize = 5;
            myChart.Series.Add(series);

            //手动构造横坐标数据
            DataTable dataTable = new DataTable();
            dataTable.Columns.Add("TheTime",typeof(DateTime)); //注意typeof
            dataTable.Columns.Add("TheValue", typeof(double)); //注意typeof
            Random random = new Random(); //随机数
            DateTime dateTime = System.DateTime.Now;
            for (int n = 0; n < 3; n++)
            {
                dateTime = dateTime.AddSeconds(10);
                DataRow dr = dataTable.NewRow();
                dr["TheTime"] = dateTime;
                dr["TheValue"] = random.Next(0, 101);
                dataTable.Rows.Add(dr);
            }
            for (int n = 3; n < 1000; n++)
            {
                dateTime = dateTime.AddSeconds(30);
                DataRow dr = dataTable.NewRow();
                dr["TheTime"] = dateTime;
                dr["TheValue"] = random.Next(0, 101);
                dataTable.Rows.Add(dr);
            }

            //线条1：下限横线
            Series seriesMin = new Series("Min");
            seriesMin.ChartType = SeriesChartType.Line;
            seriesMin.BorderWidth = 1;
            seriesMin.ShadowOffset = 0;
            seriesMin.IsVisibleInLegend = true;
            seriesMin.IsValueShownAsLabel = false;
            seriesMin.Color = Color.Red;
            seriesMin.XValueType = ChartValueType.DateTime;
            seriesMin.MarkerStyle = MarkerStyle.None;
            myChart.Series.Add(seriesMin);

            //线条3：上限横线
            Series seriesMax = new Series("Max");
            seriesMax.ChartType = SeriesChartType.Line;
            seriesMax.BorderWidth = 1;
            seriesMax.ShadowOffset = 0;
            seriesMax.IsVisibleInLegend = true;
            seriesMax.IsValueShownAsLabel = false;
            seriesMax.Color = Color.Red;
            seriesMax.XValueType = ChartValueType.DateTime;
            seriesMax.MarkerStyle = MarkerStyle.None;
            myChart.Series.Add(seriesMax);

            //设置X轴的最小值为第一个点的X坐标值
            chartArea.AxisX.Minimum = Convert.ToDateTime(dataTable.Rows[0]["TheTime"]).ToOADate();

            //开始画线
            foreach (DataRow dr in dataTable.Rows)
            {
                series.Points.AddXY(dr["TheTime"], dr["TheValue"]);

                seriesMin.Points.AddXY(dr["TheTime"], 15); //设置下线为15
                seriesMax.Points.AddXY(dr["TheTime"], 30); //设置上限为30
            }
        }

        private void myChart_GetToolTipText(object sender, ToolTipEventArgs e)
        {
            if (e.HitTestResult.ChartElementType == ChartElementType.DataPoint)
            {
                int i = e.HitTestResult.PointIndex;
                DataPoint dp = e.HitTestResult.Series.Points[i];
                e.Text = string.Format("时间:{0}，数值:{1:F1} ", DateTime.FromOADate(dp.XValue), dp.YValues[0]);
            }
        }
    }
}
View Code

 

转载于:https://www.cnblogs.com/zdh8675/p/3343019.html

weixin_30342827
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
MsChart下载（附安装方法）
04-12
Microsoft Chart Controls(最强大的.Net免费图表控件附安装方法) 在.NET 3.5下可以使用免费图表控件MsChart，是微软出品的，需要安装到VS2008环境中使用。这工具给图形统计和报表图形显示提供了很好的解决办法。 下了它的示例程序后，运行了一下，非常的强大，可以支持各种各样的图形显示，常见的：点状图、饼图、柱状图、曲线图、面积图、排列图等等，同时也支持3D样式的图表显示，不过我觉得最有用的功能还是支持图形上各个点的属性操作，它可以定义图形上各个点、标签、图形的提示信息（Tooltip）以及超级链接、Javascript动作等，而不是像其它图形类库仅生成一幅图片而已，通过这些，加上微软自己的Ajax框架，可以建立一个可以互动的图形统计报表了。
MSChart (System.Windows.Forms.DataVisualization .NET 4.0)
10-31
MSChart For VS2010 .NET 4.0
win10+VS2017成功设置MSChart控件MSCHRT20.ocx
01-27
win10最新版、Visual Studio community 2017版本是15.9.4，NET Framework是4.7.0.056，成功设置MSChart控件。具体可以参考文件
MSChart 4.0(VS2010) Winform微软官方示例源码
06-25
Windows Forms Samples Environment for Microsoft Chart Controls,MSChart 4.0(VS2010) Winform微软官方示例源码
最新版MSChart控件资料合集
06-05
基本上整合了网上绝大多数的.net3.5下的Mschart的资料，也包括了一些源码示例
demo_mschart.rar_MFC MsChart_MFC 曲线_MFC 画曲线_MFC曲线图_曲线
07-15
MSChart Demo Application, MFC平台上可以画曲线，柱状图等
MsChart 实现 放大 缩小 拖拽等效果
09-27
MsChart 实现 放大 缩小 拖拽等效果
VB曲线图柱状图控件MsChart使用范例.rar
07-10
微软的MsChart控件使用示例，图表控件，很多新手朋友遇到过不会用的问题，这个实例很简单，可以帮助你更好的理解使用方法。
利用C#语言实现MSChart控件中图形拖拽功能的winForm程序
04-04
利用C#语言实现MSChart控件中图形拖拽功能的winForm程序
VS2013、MSChart
06-05
貌似MSChart属性针对各个版本的VS都有所差别，因此文档主要针对VS2010,2012,2013的。问题不是很大，如果有问题的话，有一部分针对问题的说明解决办法，可以参考
asp.net微软图表控件MsChart
weixin_33872566的博客
07-07 154
前段时间，开发项目时，由于需要，需要将一些数据统计，并以图表形式显示。由于是asp.net，所以就找到了MsChart图表控件，还是挺方便实用的，分享一下。 MsChart控件的主要组成如图所示 工具栏中找到“Chart”控件，将其拖进前台中 一旦将Chart控件拖放至前台，强大的IDE帮助你完成了一些事情 并引用了System.Web.DataVisualization动态库，而且还在网站...
ASP.NET3.5下的MSChart图表控件使用
流水账
02-02 4533
最近在做一个指标管理，有一个统计指标完成量的功能，偶然间发现了MSChart控件，下载下来试了试，发现很好用，可以做出非常漂亮的图表。可以设置的选项非常多，自带的Samples有很多漂亮的样式。赶紧用上了。ps：说是把Dundas 买下来了。微软就是财大气粗。下载地址：http://www.microsoft.com/downloads/details.aspx?displaylang=z
MSChart图表之Chart组件 学习一篇（5个主要属性+数据源绑定）
L511157586的博客
03-28 793
前沿：简单练习效果---- 一、5大属性简介： 整个图形控件主要由以下几个部份组成：1.Annotations --图形注解集合2.ChartAreas --图表区域集合3.Legends --图例集合4.Series　　　 --图表序列集合（即图表数据对象集合）5.Titles　　　　--图标的标题集合 Annotations注解集合 Annotati...
asp.net使用mscharts生成图表
weixin_33995481的博客
07-09 108
最近在做一个项目时，用到数据的统计分析，如果把数据导出到excel生成图表，自然是一个办法，但是太麻烦了。微软有专门做图表的控件，为什么不用呢。 mschart控件只能用在vs2008上，而且必须安装了.NET3.5 SP1，否则mschart安装不上。 使用方法很简单，把chart控件拖进页面，后台写绑定程序。数据绑定时有两句代码要注意： Chart1...
Winform 控件自适应 JSP 入门登录案例
weixin_30245867的博客
09-26 110
明儿在放，先睡 转载于:https://www.cnblogs.com/javabin/archive/2011/09/26/2192402.html
ECHarts.js
aaronthon的博客
12-09 1104
&#13; &#13; （一）EChart.js 简单入门&#13; 最近有一个统计的项目要做，在前端的数据需要用图表的形式展示。网上搜索了一下，发现有几种统计图库。&#13; MSChart  &#13; 这个是Visual Studio里的自带控件，使用比较简单，不过数据这块需要在后台绑定。&#13; ichartjs&#13; 是一款基于HTML5的图形库。使用纯jav...
MSChart 双Y轴 自适应，轴刻度坐标值美化
weixin_30810239的博客
06-11 1212
题记：今天是要爆发了，要反哺尽点力 Chart有很多，前端的如HeightChart...连百度都搞了一个。微软MSChart依旧停滞不前，没想到这会显示出 落后的优点了。 双Y轴 自适应 Series def = new Series(); def.YAxisType = AxisType.Secondary; chartArea.AxisY2.Maximum = data.M...
winfrom中chart和mschart那个好用
最新发布
09-01
首先，Chart是在.NET Framework中内置的图表控件，而MSChart是微软提供的免费开源图表控件。两者都可以方便地嵌入到WinForms应用程序中，以提供数据可视化的功能。 在使用方面，Chart相对来说更加简单和易用。它...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值