一、概述
本文先容使用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(); }
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 |
