wpf使用Chart控件绘制线图

​ 最近再项目中，突然用到了绘图的功能，虽然只是将用户数据简单的展示出来，但是介于之前从来没有用过wpf的原生控件绘图，所以就先再网上找了demo，尝试了一下，这里当作记录。

​ 测试程序运行结果如下：

​

​ 电脑上安装的是vs2019，没有在控件里面看到Chart，发现要添加两个引用

​
添加后，就可以开始wpf界面代码添加了，具体代码如下：

<Window x:Class="DrawingView.GraphView"
        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:wf="clr-namespace:System.Windows.Forms;assembly=System.Windows.Forms"
        xmlns:wfi ="clr-namespace:System.Windows.Forms.Integration;assembly=WindowsFormsIntegration"
        xmlns:Chr="clr-namespace:System.Windows.Forms.DataVisualization.Charting;assembly=System.Windows.Forms.DataVisualization"
        xmlns:local="clr-namespace:DrawingView"
        mc:Ignorable="d"
        Title="GraphView" Height="450" Width="800">
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="40"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>
        <StackPanel Grid.Row="0" Orientation="Horizontal" HorizontalAlignment="Left" VerticalAlignment="Center" Margin="20,0">
            <Button Content="初始化" x:Name="InitBtn" Click="InitBtn_Click" Width="80" Height="18" Margin="10,0"/>
            <Button Content="开始" x:Name="StartBtn" Click="StartBtn_Click" Width="80" Height="18" Margin="10,0"/>
        </StackPanel>

        <Border Grid.Row="1" BorderThickness="2" BorderBrush="LightGray" Margin="10" CornerRadius="5">
            <wfi:WindowsFormsHost>
                <Chr:Chart x:Name="chart1"/>
            </wfi:WindowsFormsHost>
        </Border>
    </Grid>
</Window>

最主要的代码是这里，先添加两个引用，然后再xaml中添加一个容器，最后把chart控件放到容器中：

<wfi:WindowsFormsHost>
	<Chr:Chart x:Name="chart1"/>
</wfi:WindowsFormsHost>

接下来看看后台代码：

using System;
using System.Collections.Generic;
using System.Linq;
using System.Windows;
using System.Windows.Forms.DataVisualization.Charting;

namespace DrawingView
{
    /// <summary>
    /// GraphView.xaml 的交互逻辑
    /// </summary>
    public partial class GraphView : Window
    {
        private Queue<double> dataQueue = new Queue<double>(100);

        private Queue<double> dataQueueSin = new Queue<double>(100);

        public GraphView()
        {
            InitializeComponent();
        }

        private void InitBtn_Click(object sender, RoutedEventArgs e)
        {
            InitChart();
        }

        private void StartBtn_Click(object sender, RoutedEventArgs e)
        {
            UpdateQueueValue();
            this.chart1.Series[0].Points.Clear();
            for (int i = 0; i < dataQueue.Count; i++)
            {
                this.chart1.Series[0].Points.AddXY((i + 1), dataQueue.ElementAt(i));
            }
            this.chart1.Series[1].Points.Clear();
            for (int i = 0; i < dataQueueSin.Count; i++)
            {
                this.chart1.Series[1].Points.AddXY((i + 1), dataQueueSin.ElementAt(i));
            }
        }

        private void UpdateQueueValue()
        {
            Random r = new Random();
            for (int i = 0; i < 100; i++)
            {
                //对象添加到 System.Collections.Generic.Queue<T> 的结尾处。
                dataQueue.Enqueue(r.Next(0, 100));
            }

            int curValue = 0;
            for (int i = 0; i < 100; i++)
            {
                curValue = curValue % 360;
                dataQueueSin.Enqueue(50 * Math.Sin(curValue * Math.PI / 180) + 50);
                curValue += 10;
            }
        }

        private void InitChart()
        {
            //定义图标区域
            this.chart1.ChartAreas.Clear();
            ChartArea chartArea1 = new ChartArea("C1");
            this.chart1.ChartAreas.Add(chartArea1);

            ChartArea chartArea2 = new ChartArea("C2");
            this.chart1.ChartAreas.Add(chartArea2);

            //定义储存和显示点的容器
            this.chart1.Series.Clear();
            Series series1 = new Series("S1");
            series1.ChartArea = "C1";
            this.chart1.Series.Add(series1);

            Series series2 = new Series("S2");
            series2.ChartArea = "C2";
            this.chart1.Series.Add(series2);

            //设置图标显示样式
            foreach(var item in this.chart1.ChartAreas)
            {
                item.AxisX.Minimum = 0;
                item.AxisX.Maximum = 100;
                item.AxisX.Interval = 5;
                item.AxisX.MajorGrid.LineColor = System.Drawing.Color.Silver;
                item.AxisY.MajorGrid.LineColor = System.Drawing.Color.Silver;
            }
            //设置标题
            this.chart1.Titles.Clear();
            this.chart1.Titles.Add("S1");
            this.chart1.Titles[0].Text = "图形绘制展示";
            this.chart1.Titles[0].ForeColor = System.Drawing.Color.RoyalBlue;
            this.chart1.Titles[0].Font = new System.Drawing.Font("Microsoft Sans Serif", 12F);
            //设置图标显示样式
            this.chart1.Series[0].Color = System.Drawing.Color.Red;
            this.chart1.Series[1].Color = System.Drawing.Color.Red;

            this.chart1.Series[0].ChartType = SeriesChartType.Line;

            this.chart1.Series[1].ChartType = SeriesChartType.Spline;

            this.chart1.Series[0].Points.Clear();

            // 清除dataQueue中所有数据
            dataQueue.Clear();
            dataQueueSin.Clear();
        }
    }
}

​ dataQueue和dataQueueSin是用来存放绘图点的（y数据点），一个是随机数，一个是正/余弦波。在代码中，主要就是利用chart控件的集合属性画图，最主要的三个属性ChartAreas、Series、Legends，在这里我没有用到Legends，但是可以再我推荐的博客里面看到使用和详解。

1. ChartAreas属性：ChartAreas可以理解为是一个图表的绘图区，图表控件并不限制你添加多少个绘图区域，你可以根据你的需要进行添加，对于每个绘图区域，都可以设置独立的属性，如：X,Y轴属性、背景等。但是他只开辟了一个可作图的空间，并不包含要作图的数据。
2. Series属性：图表集合，就是最终看到的饼图、柱状图、线图、点图等构成数据的集合。每个Series属性，可以给他指定到特定的绘图区中。
3. Legends属性：MSChart的图例默认不显示，可以通过属性配置实现展示。

​ chart控件的基本信息，可以参考下面这篇博客：

​ https://blog.csdn.net/qq_27825451/article/details/81305387

​

​ chart控件可以绘制的其他图形基本教程，可以参考下面这篇博客：

​ https://www.cnblogs.com/mazhenyu/p/9498439.html

​ 然后还看了一篇总结：

​ https://blog.csdn.net/daisy0923/article/details/73325681

​ 上面的这三个博客供参考，具体的还是要自己动手尝试才行。