WPF Visifire 入门-动态曲线图[通俗易懂]

大家好，又见面了，我是你们的朋友全栈君。

kagula

2019-3-18

这里用源代码的形式，示范如何画出一个最简单的动态曲线图。

开发环境，Visual studio 2017 Community Update5 

项目类型: WPF C# .NetFramework 4.6.1 

本文适用对象：  有两年没有开发C# WPF的程序员， 通过这个示例可以快速回忆。

下面是运行效果图，不停显示最新生成的十个数据点。

让程序跑起来分三步

第一步

新建WPF项目， 添加Reference, WPFVisifire.Charts.dll

第二步

修改xaml， 修改后的内容如下

<Window x:Class="testVisifire.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:vc="clr-namespace:Visifire.Charts;assembly=WPFVisifire.Charts"
        xmlns:local="clr-namespace:testVisifire"
        mc:Ignorable="d"
        Title="MainWindow" Height="450" Width="800">
    <Grid>
        <vc:Chart Name="chart" DockPanel.Dock="Left" Margin="6" />
    </Grid>
</Window>

第三步

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Navigation;
using System.Windows.Shapes;
using Visifire.Charts;

namespace testVisifire
{
    /// <summary>
    /// Interaction logic for MainWindow.xaml
    /// </summary>
    public partial class MainWindow : Window
    {
        System.Timers.Timer _timer;
        Random _random = new Random();

        public MainWindow()
        {
            InitializeComponent();

            initChart();

            addData2Chart();

            initTimer();

            _timer.Start();
        }

        private void initChart()
        {
            // 创建一个标题的对象
            Title title = new Title();

            // 设置标题的名称
            title.Text = "abc";
            title.Padding = new Thickness(0, 10, 5, 0);

            // 向图标添加标题
            chart.Titles.Add(title);

            // 初始化一个新的Axis 
            Axis xAxis = new Axis();
            // 设置axis的属性
            //图表的X轴坐标按什么来分类，如时分秒 
            xAxis.IntervalType = IntervalTypes.Seconds;
            //图表中的X轴坐标间隔如2，3，20等，单位为xAxis.IntervalType设置的时分秒。 
            xAxis.Interval = 1;
            //设置X轴的时间显示格式为7-10 11：20 
            xAxis.ValueFormatString = "hh:mm:ss";
            //给图标添加Axis 
            chart.AxesX.Add(xAxis);
            Axis yAxis = new Axis();
            //设置图标中Y轴的最小值永远为0 
            yAxis.AxisMinimum = 0;
            yAxis.AxisMaximum = 64;
            //设置图表中Y轴的后缀 
            yAxis.Suffix = "";
            chart.AxesY.Add(yAxis);
        }

        private void addData2Chart()
        {
            // 创建一个新的数据线。 
            DataSeries dataSeries = new DataSeries();

            // 设置数据线的格式。 
            dataSeries.RenderAs = RenderAs.Line;
            dataSeries.XValueType = ChartValueTypes.DateTime;

            /*
            for (int i = 0; i < 32; i++)
            {            
                // 设置数据点 
                DataPoint dataPoint;
                // 创建一个数据点的实例。 
                dataPoint = new DataPoint();

                // 设置X轴点 
                DateTime dt = DateTime.Now;
                dataPoint.XValue = dt.AddSeconds(i);

                //设置Y轴点 
                dataPoint.YValue = i;
                dataPoint.MarkerSize = 8;
                dataPoint.Tag = "bbb";

                //设置数据点颜色 
                dataPoint.Color = new SolidColorBrush(Colors.LightGray);

                //添加数据点 
                dataSeries.DataPoints.Add(dataPoint);

                //测试删除前面的点
                if(dataSeries.DataPoints.Count>10)
                {
                    dataSeries.DataPoints.RemoveAt(0);
                }
            }
            */
            // 添加数据线到数据序列。 
            chart.Series.Add(dataSeries);
        }

        private void initTimer()
        {
            _timer = new System.Timers.Timer(1000);

            //实例化Timer类，设置间隔时间为10000毫秒；   

            _timer.Elapsed += new System.Timers.ElapsedEventHandler(onTimer);

            //到达时间的时候执行事件； 
        }


        public void onTimer(object source, System.Timers.ElapsedEventArgs e)
        {
            this.Dispatcher.Invoke(new Action(() => {
                try
                {
                    DataSeries ds = chart.Series[0];
                    DataPoint dataPoint = new DataPoint();

                    // 设置X轴点 
                    DateTime dt = DateTime.Now;
                    dataPoint.XValue = dt.AddSeconds(10);

                    //设置Y轴点 
                    dataPoint.YValue = _random.Next(1,32);
                    dataPoint.MarkerSize = 8;

                    //设置数据点颜色 
                    dataPoint.Color = new SolidColorBrush(Colors.LightGray);

                    //添加数据点 
                    ds.DataPoints.Add(dataPoint);

                    //测试删除前面的点
                    if (ds.DataPoints.Count > 10)
                    {
                        ds.DataPoints.RemoveAt(0);
                    }
                }
                catch (Exception ex)
                {
                    System.Diagnostics.Debug.WriteLine(ex.Message);
                }
            }));         

        }
    }
}

最后F5就可以运行了。

注意:

[1]如果要让控件自动适应窗口大小建议外面一层用Grid，里面再套StackPanel.

[2]在xaml中等布局好后，最后放visifire， 因为放了visifire，图形编辑环境就不能render了，等有时间，研究下如何解决这个问题。