一、概述
本文介绍使用ScottPlot.WPF绘制折线图。
二、折线图
第一步：新建项目
1.新建项目：SPLineDemo
2.添加Nuget包：ScottPlot.WPF
第二步：在MainWindow中编写以下代码
<Window x:Class="SPLineDemo.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:local="clr-namespace:SPLineDemo"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
Title="折线图"
Width="800"
Height="450"
mc:Ignorable="d">
<Grid>
<WpfPlot x:Name="plot" />
</Grid>
</Window>
第三步：在MainWindow.xaml.cs中分别进行各功能的代码演示
1.基础折线图
功能演示
实现代码
using System.Windows;
namespace SPLineDemo
{
public partial class MainWindow : Window
{
public MainWindow()
{
InitializeComponent();
InitBasicLineChart();
}
// 折线图
private void InitBasicLineChart()
{
// 1.定义数据
double[] xs = { 1, 2, 3, 4, 5 };
double[] ys = { 1, 4, 9, 16, 20 };
// 2.添加折线
plot.Plot.AddScatterLines(xs, ys);
// 3.刷新界面
plot.Refresh();
}
}
}
首先用数组的形式定义了数据源，然后调用AddScatterLines将数据源传入，绘制折线，最后调用Refresh方法刷新界面
Refresh方法必须调用，否则界面会有警示消息
注：为方便阅读，下面仅展示核心代码，其调用方式与此例无异
2.曲线图
功能演示
实现代码
// 曲线图
private void InitSmoothLineChart()
{
// 1.定义数据
double[] xs = { 1, 2, 3, 4, 5 };
double[] ys = { 1, 4, 9, 16, 20 };
// 2.添加折线
var sp = plot.Plot.AddScatterLines(xs, ys);
sp.Smooth = true; // 指定曲线为平滑曲线
// 3.刷新界面
plot.Refresh();
}
- 将折线的Smooth属性设置为true，使曲线便平滑
3.折线图-点样式
功能演示
实现代码
// 折线图-点样式
private void InitLineWithMarker()
{
double[] xs = { 1, 2, 3, 4, 5 };
double[] ys = { 1, 4, 9, 16, 20 };
// 添加折线
plot.Plot.AddScatter(xs, ys);
plot.Refresh();
}
- 之前用AddScatterLines添加无点折线，用AddScatter添加带点的折线
4.折线图-仅绘制点
功能演示
实现代码
// 折线图-仅绘制点
private void InitOnlyMarker()
{
double[] xs = { 1, 2, 3, 4, 5 };
double[] ys = { 1, 4, 9, 16, 20 };
// 仅绘制点
plot.Plot.AddScatterPoints(xs, ys, Color.Navy, 10, MarkerShape.filledCircle);
plot.Refresh();
}
- 使用AddScatterPoints来绘制点，这其实是散点图了。
5.多折线图
功能演示
实现代码
// 多折线图
private void InitMultiLines()
{
double[] xs = { 1, 2, 3, 4, 5 };
double[] ys1 = { 1, 4, 9, 16, 20 };
double[] ys2 = { 2, 8, 18, 32, 40 };
// 添加折线1
plot.Plot.AddScatter(xs, ys1);
// 添加折线2
plot.Plot.AddScatter(xs, ys2);
plot.Refresh();
}
- 多次调用AddScatter方法可以添加更多折线
6.自定义点样式
功能演示
实现代码
// 自定义点样式
private void InitCustomMarkers()
{
double[] xs = { 1, 2, 3, 4, 5 };
double[] ys1 = { 1, 4, 9, 16, 20 };
double[] ys2 = { 2, 8, 18, 32, 40 };
var sp1 = plot.Plot.AddScatter(xs, ys1, markerSize: 8); // markerSize定义marker大小
sp1.MarkerShape = MarkerShape.openCircle; // 空心圆
var sp2 = plot.Plot.AddScatter(xs, ys2, markerSize: 6);
sp2.MarkerShape = MarkerShape.filledSquare; // 实体方
plot.Refresh();
}
通过改变MarkerSize属性改变marker的大小
通过改变MarkerShape属性改变marker的样式
MarkerShape是个枚举类型，支持样式如下：
7.添加折线图图例
功能演示
实现代码
// 添加折线图图例
private void InitLineLegends()
{
double[] xs = { 1, 2, 3, 4, 5 };
double[] ys1 = { 1, 4, 9, 16, 20 };
double[] ys2 = { 2, 8, 18, 32, 40 };
var sp1 = plot.Plot.AddScatter(xs, ys1);
sp1.Label = "折线1"; // 折线1标签
var sp2 = plot.Plot.AddScatter(xs, ys2);
sp2.Label = "折线2"; // 折线2标签
// 添加图例，并设置位置为右下
var legend = plot.Plot.Legend(location: Alignment.LowerRight);
legend.FontSize = 10; // 图例字体大小
plot.Refresh();
}
首先为折线设置标签名称
然后添加图例，并设置图例的位置
最后设置了图例字体大小
8.折线图样式
功能演示
实现代码
// 折线图样式
private void InitLineStyles()
{
double[] xs = { 1, 2, 3, 4, 5 };
double[] ys1 = { 1, 4, 9, 16, 20 };
double[] ys2 = { 2, 8, 18, 32, 40 };
// color：颜色，lineWidth：线宽，lineStyle：线样式
plot.Plot.AddScatter(xs, ys1, color: Color.Blue, lineWidth: 1);
plot.Plot.AddScatter(xs, ys2, color: Color.Orange, lineWidth: 2, lineStyle: LineStyle.Dash);
plot.Refresh();
}
通过设置Color，设置折线颜色
通过设置LineWidth，设置折线宽度
通过设置LineStyle，设置折线样式。LineStyle为枚举，支持样式如下：
9.阶梯折线图
功能演示
实现代码
// 阶梯折线图
private void InitStepLines()
{
double[] xs = { 1, 2, 3, 4, 5 };
double[] ys = { 1, 4, 9, 16, 20 };
// 添加阶梯折线图
plot.Plot.AddScatterStep(xs, ys);
plot.Refresh();
}
- 通过AddScatterStep方法，添加阶梯折线图
10.可拖动折线图
功能演示
实现代码
// 可拖动折线图
private void InitDragLine()
{
double[] xs = { 1, 2, 3, 4, 5 };
double[] ys = { 1, 4, 9, 16, 20 };
// 添加可拖动折线
var scatter = new ScottPlot.Plottable.ScatterPlotListDraggable();
scatter.AddRange(xs, ys);
plot.Plot.Add(scatter);
plot.Refresh();
}
11.折线图动态数据展示
功能演示
实现代码
// 折线图动态数据展示
private void InitDynamicDataDisplay()
{
var random = new Random();
var xs = new List<double>();
var ys = new List<double>();
plot.Render();
Task.Factory.StartNew(async () =>
{
var index = 5;
while (true)
{
xs.Add(index++);
ys.Add(random.Next(1, 100));
plot.Plot.Clear();
plot.Plot.AddScatter(xs.ToArray(), ys.ToArray());
Dispatcher.Invoke(() => plot.Render());
await Task.Delay(300);
}
});
}
核心逻辑便是重绘：清理掉之前的绘制，然后重新绘制折线，达到动态显示的效果。
需要注意的便是Refresh方法必须在UI线程中调用。
12.折线图泛型数据源
功能演示
实现代码
// 折线图泛型数据源
private void InitGenric()
{
float[] xs = { 1, 2, 3, 4, 5 };
float[] ys = { 1, 4, 9, 16, 20 };
// 使用泛型数据
var scatterList = plot.Plot.AddScatterList<float>();
scatterList.AddRange(xs, ys);
plot.Refresh();
}
三、环境
开发工具：Visual Studio
开发语言：C#
目标框架：.Net 6.0
Nuget包：DynamicDataDisplayReloaded
