C# WPF 如何使用折线图方案

使用WPF的时候经常会出现需要使用折线图、柱状图的情况，一下为折线图的使用方案

一、导入NuGet包

项目搜索导入LiveCharts.Wpf包

二、后端配置

折线图需要调用 LineSeries、柱状图调用LineSeries、具体使用图形可参考官方网站

 官方网址： Live Charts

这里举例说明折线图的使用方法

1、Title：线条命名

2、Values：折线图的点位图，可以使用ChartValues<double> 类型进行动态赋值；

3、LineSmoothness：折线平滑度，如下图 红线平滑度为0、绿线平滑度为5

4、PointForeground ：节点的颜色

5、Stroke：折线图线条的颜色

using LiveCharts;
using LiveCharts.Wpf;
using CommunityToolkit.Mvvm.ComponentModel;//MVVM框架
using CommunityToolkit.Mvvm.Input;//MVVM框架

namespace Cst_Device.ViewModel
{
    public class ObservableObjectPageViewModel : ObservableObject
    {
        private SeriesCollection _SeriesCollection;
        public SeriesCollection SeriesCollection { get => _SeriesCollection; set => SetProperty(ref _SeriesCollection, value); }

        SeriesCollection = new SeriesCollection() {  new LineSeries()
        {
            Title = "上限",
            Values = qx1,//动态展示当前选择参数
            LineSmoothness = 0, // 使线条更加平滑
            PointForeground = new SolidColorBrush((System.Windows.Media.Color)ColorConverter.ConvertFromString("#F982B4")), // 点的颜色
                         Stroke = new SolidColorBrush((System.Windows.Media.Color)ColorConverter.ConvertFromString("#F982B4")) // 线的颜色
         },new LineSeries(){
            Title = "实际值",
            Values = qx2,//动态展示当前选择参数
            LineSmoothness = 0, // 使线条更加平滑
            PointForeground = new SolidColorBrush((System.Windows.Media.Color)ColorConverter.ConvertFromString("#00E07F")), // 点的颜色
            Stroke = new SolidColorBrush((System.Windows.Media.Color)ColorConverter.ConvertFromString("#00E07F")) // 线的颜色
         },new LineSeries(){
            Title = "下限",
            Values = qx3,//动态展示当前选择参数
            LineSmoothness = 0, // 使线条更加平滑
            PointForeground = new SolidColorBrush((System.Windows.Media.Color)ColorConverter.ConvertFromString("#0F70E6")), // 点的颜色
            Stroke = new SolidColorBrush((System.Windows.Media.Color)ColorConverter.ConvertFromString("#0F70E6")) // 线的颜色
                    }
            };
    }
}

三、前端界面代码

<lvc:CartesianChart Grid.Column="0" DataTooltip="{x:Null}" Series="{Binding SeriesCollection}" Height="500"  >
    <lvc:CartesianChart.AxisX>
        <lvc:Axis LabelsRotation="-15" Labels="{Binding Labels1}" MaxValue="{Binding MaxValue}" MinValue="{Binding MinValue}">
            <lvc:Axis.Separator>
                <lvc:Separator Step="1" />
            </lvc:Axis.Separator>
        </lvc:Axis>
    </lvc:CartesianChart.AxisX>
</lvc:CartesianChart>