WPF—LiveCharts图表

LiveCharts图表

LiveCharts是一个简单灵活、交互式以及功能强大的跨平台图表库，支持wpf、winform...应用程序。

快速入门

安装

在应用程序中右键`引用`，点击`管理NuGet程序包`，选择`浏览`，搜索`LiveChartsCore.SkiaSharpView.WPF`，注意必须勾选`包括预发行版`选项，否则搜索不到它。然后点击安装即可，此教程以WPF应用为例，其他应用程序参考官方文档，

第一个图表

首先先为图表创建一个容器，用于显示折线、柱...

    <Window 
      xmlns:lvc="clr-namespace:LiveChartsCore.SkiaSharpView.WPF;assembly=LiveChartsCore.SkiaSharpView.WPF"  // 注意添加命名空间
    >
        <Grid>
            <!-- 使用笛卡尔图表（坐标图表） 
            Series  绑定图表的数据
            -->
            <lvc:CartesianChart
                Series="{Binding Series}"   
            />
        </Grid>
    </Window>

定义数据并进行绑定

    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();
            this.DataContext = this;
        }
        // 定义属性存储图表数据，不管什么数据都实现了  ISeries   接口
        public ISeries[] Series { get; set; }   
        = new ISeries[]
        {   // 创建一个折线数据，存储double数据
            new LineSeries<double>()
            {
                Values = new List<double>(){ 10,20,44,12,41,31.2 },
            }
        };
    }

配置主题、字体或映射器（可选）

您可以配置 LiveCharts 以添加主题、注册全局字体、启用工具提示或类型的自定义映射器，当您需要非拉丁字体时，您必须注册字体，以便 SkiaShap 可以呈现文本正确，请在应用程序启动时添加以下代码

    // App.xaml.cs
    using LiveChartsCore; 
    using LiveChartsCore.SkiaSharpView; 
    using SkiaSharp; 
    
    public partial class App : Application
    {
        protected override void OnStartup(StartupEventArgs e)
        {
            base.OnStartup(e);
    
            LiveCharts.Configure(config => 
                config 
                    // 注册字体
                    //.HasGlobalSKTypeface(SKFontManager.Default.MatchCharacter('汉')) // <- 中文
                    //.HasGlobalSKTypeface(SKFontManager.Default.MatchCharacter('あ')) // <- 日语 
                    //.HasGlobalSKTypeface(SKFontManager.Default.MatchCharacter('헬')) // <- 韩语
                    //.HasGlobalSKTypeface(SKFontManager.Default.MatchCharacter('Ж'))  // <- 俄语
                    //.HasGlobalSKTypeface(SKFontManager.Default.MatchCharacter('أ'))  // <- 阿拉伯语
    
                    //.UseRightToLeftSettings() // 弃用从右到左布局
            ); 
        }
    }

CartesianChart 笛卡尔坐标图表

该控件是一个“随时可用”的控件，用于使用笛卡尔坐标系创建绘图，首先，您需要做的就是使用 ICartesianSeries的集合为属性分配

    public ISeries[] Series { get; set; }   
    = new ISeries[]
    {  
        // LineSeries  定义一个折线数据
        new LineSeries<double>()
        {
            Values = new List<double>(){ 10,20,44,12,41,31.2 },
        },
        // ColumnSeries   定义一个柱状数据
        new ColumnSeries<double>()
        {
            Values = new List<double>() {22,3,52,4,23,12}
        }
    };

    <lvc:CartesianChart
        Series="{Binding Series}">
    </lvc:CartesianChart>

笛卡尔坐标图表主要包含Series系列、Axes轴、Tooltip工具提示、Legend图例

缩放和平移

默认情况下，它是禁用的，要启用它，您必须设置该属性。`ZoomMode`

    <lvc:CartesianChart
        Series="{Binding Series}"
        ZoomMode="X"> 
    </lvc:CartesianChart>

AnimationsSpeed 属性

定义所有图表元素（轴、系列、截面）的动画速度。

    <lvc:CartesianChart
        Series="{Binding Series}"
        AnimationsSpeed="00:00:00.500"> <!-- 500 milliseconds --> 
    </lvc:CartesianChart>

禁用动画

    <lvc:CartesianChart
        EasingFunction="{x:Null}"> 
    </lvc:CartesianChart>

图表边距

定义从轴（如果没有轴，则为图表边缘）到绘制边距区域的距离。

    public LiveChartsCore.Measure.Margin ChartMargin { get; set; } = new LiveChartsCore.Measure.Margin(100);

    <lvc:CartesianChart
        Series="{Binding Series}"
        DrawMargin="{Binding ChartMargin}"> 
    </lvc:CartesianChart>

控件容器样式

[DrawMarginFrame]控制图表容器的样式，可以设置背景和边框

    public DrawMarginFrame DrawMarginFrame => new DrawMarginFrame()
    {
        Fill = new SolidColorPaint(SKColors.Pink),  // 背景
        Stroke = new SolidColorPaint(SKColors.Red)  // 边框
        {
            StrokeThickness = 3,    // 宽度
            PathEffect = new DashEffect(new float[] { 3, 3 })   // 虚线
        },
    };

    <lvc:CartesianChart
        Series="{Binding Series}"   
        DrawMarginFrame="{Binding DrawMarginFrame}"
    />

系列 Series

库中有多个系列可用，您可以添加一个或将它们全部混合在同一个图表中，每个系列都有独特的属性，下面的任何图像都是指向解释有关它们的更多信息的文章的链接。

坐标轴 Axes

笛卡尔坐标有两个轴，不仅用于控制标签格式、分隔符、颜色，还可以控制如缩放、平移、分页等功能，[详情查看](https://livecharts.dev/docs/wpf/2.0.0-rc2/CartesianChart.Axes%20properties)，下面是对坐标轴的简单演示

* `name` 坐标轴名称
* `NamePaint`坐标轴名称样式
* `LabelsPaint`坐标轴文本样式
* `TextSize`文本大小
* `Labels`坐标轴文本
* `SeparatorsPaint`分割线样式

    public Axis[] XAxes { get; set; } = new Axis[]
    {
        new Axis()
        {
            Name = "横坐标",   // 坐标名称
            NamePaint = new SolidColorPaint(SKColors.Red),  // 坐标名称颜色
            LabelsPaint = new SolidColorPaint(new SKColor(190, 75, 219)),   // 坐标文本颜色
            TextSize = 18,  // 坐标文字大小
            Labels = new string[]{"衣服", "裤子", "鞋子", "袜子", "帽子", "围巾" }  // 坐标文本列表
        }
    };
    public Axis[] YAxes { get; set; } = new Axis[]
    {
        new Axis()
        {
            Name = "纵坐标",
            // 分割线绘制
            SeparatorsPaint = new SolidColorPaint(SKColors.Yellow)  // 颜色
            {
                StrokeThickness = 4,        // 线条粗细
                PathEffect = new DashEffect(new float[]{ 3, 20 })   // 设置虚线间隔，3px线 20px白
            },
            // 最大值
            MaxLimit = 100,
            // 最小值
            MinLimit = 10,
            // 每个格子间隔的数值
            MinStep = 10,
        }
    };

工具提示 ToolTip

[工具提示]是帮助用户在指针移动时阅读图表的弹出窗口。

`TooltipPosition` 控制弹窗的位置，设置为`Hidden`则不显示弹窗

    <lvc:CartesianChart
        Series="{Binding Series}"
        TooltipPosition="Top">
    </lvc:CartesianChart>

工具提示自定义文本

可以使用`XToolTipLabelFormatter`或`YToolTipLabelFormatter`自定义提示弹窗的文本，接收一个委托`Series.TooltipLabelFormatterFunc<ChartPoint, string>`

默认情况下，库已经为每个系列定义了一个默认值，所有系列都有不同的格式化程序

    new LineSeries<double>
    {
        Name = "Sales",
        Values = new ObservableCollection<double> { 200, 558, 458 },
        TooltipLabelFormatter =
            (chartPoint) => $"{chartPoint.Context.Series.Name}: {chartPoint.PrimaryValue}"
    },
    
    new ColumnSeries<double>
    {
        Name = "Sales 2",
        Values = new ObservableCollection<double> { 250, 350, 240 },
        // 以货币的形式展示提示文本
        // result: Sales 2: $200.00
        TooltipLabelFormatter =
            (chartPoint) => $"{chartPoint.Context.Series.Name}: {chartPoint.PrimaryValue:C2}"
    },

图例 Legend

[图例]是一种视觉元素，它以图表的形式显示一个列表，其中包含该系列的名称、描边和填充：

* `LegendPosition` 控制图例的位置，`Hidden`表示禁用图例

    <lvc:CartesianChart
        Series="{Binding Series}"   
        LegendPosition="Right"
    />

PieChart 饼图

饼状图，通常用于表示某个数据在数据中的占比，分为饼图、环形图、仪表图

    public ISeries[] Series => new ISeries[]
    {
        new PieSeries<double> { Values = new double[] { 2 }, Name="吃饭" },
        new PieSeries<double> { Values = new double[] { 4 }, Name="睡觉" },
        new PieSeries<double> { Values = new double[] { 1 }, Name="买菜" },
        new PieSeries<double> { Values = new double[] { 4 }, Name="洗澡" },
        new PieSeries<double> { Values = new double[] { 3 }, Name="抽烟" }
    };

    <lvc:PieChart
        Series="{Binding Series}" 
    />

会自动根据配置的数据从0°开始顺时针绘制图表

InitialRotation` 绘制第一个切片的角度
MaxAngle` 确定图表的完整角度（以度为单位），默认值为 360。
AnimationsSpeed` 动画速度，和笛卡尔图相同
Stroke` 边框
Fill` 填充色
Pushout` 控件中心与饼图切片之间的距离
InnerRadius` 切片的内半径（以像素为单位），对于创建圆环图很有用

饼图文本

使用`DataLabels`相关属性设置饼图上显示的文本相关信息

* `DataLabelsPosition` 文本显示位置
* `DataLabelsFormatter` 文本显示内容
* `DataLabelsPaint` 文本显示颜色
* `DataLabelsSize` 文本显示大小

    new PieSeries<int>{ 
      Values = new int[]{12}, 
      Name="吃饭",
      DataLabelsPosition = PolarLabelsPosition.Middle, 
      DataLabelsFormatter = point => point.Context.Series.Name + point.Context.DataSource,
      DataLabelsPaint = new SolidColorPaint(SKColors.Black),
      DataLabelsSize = 22, 
    }

极坐标图

极坐标图表用于显示类似雷达图的图表

快速使用

    public ISeries[] Series2 { get; set; } = new ISeries[]
    {
        new PolarLineSeries<int>
        {
            Values = new int[]{10,20,30,40,50,60},
            IsClosed = false,
        }
    };

    <lvc:PolarChart
        Series="{Binding Series2}"
    />

PolarLineSeries常用属性

* Values 指定数据值
* IsClosed 是否闭合数据线
* Fill 填充样式
* GeometryFill 标记点填充色
* GeometryStroke 标记点描边色
* GeometrySize 标记点大小
* LineSmoothness 确定序列线是直线还是曲线，其中 0 是直线，1 是最弯曲的线

PolarChart常用属性

* InitialRotation 初始角度
* InnerRadius 内环半径
* TotalAngle 展示数据的角度
* RadiusAxes 一圈一圈的线样式
- * `IPolarAxis[]` 类型
- * TextSize 文本大小
- * LabelsPaint 文本颜色
- * SeparatorsPaint 线条样式
- * IsVisible 是否显示
- * Labels 显示的文本
* AngleAxes 分割线的样式（米字形的），数据值类型和`RadiusAxes`相同

动态图表

使用图表经常会有需要动态的添加或者修改数据的情况，使用liveCharts，我们只需要操作数据，图表将会自动进行更新，如下，点击按钮后图表的颜色和名字都将发生变化

    public MainWindow()
    {
      InitializeComponent();
      this.DataContext = this;
      Series.Add(columnSeries);
    }
    ColumnSeries<int> columnSeries = new ColumnSeries<int>
    {
      Values = new List<int> { 10, 2, 3, 4, 5, 6 },
      Name = "销量",
    };
    private void Button_Click(object sender, RoutedEventArgs e)
    {
      columnSeries.Name = "测试修改";
      columnSeries.Fill = new SolidColorPaint(SKColors.Gold);
    }

但是，同样的写法并不能在添加数据时生效，如下代码中向Values添加数据，图表不会发生更新

    (columnSeries.Values as List<int>).Add(20);

因为LiveCharts 更改检测基于`INotifyPropertyChanged`和`INotifyCollectionChanged`接口，两者均由 .Net 框架提供，每次属性或集合发生更改并且对象实现任何这些接口时，图表都会限制更新，而List没有实现这个接口，因此需要使用已经实现了该接口的类将需要更新的数据进行包裹，仅此而已。

代码如下，仅仅需要将Values属性的值由`List<int>`修改为`ObservableCollection<int>`即可，十分方便

   ColumnSeries<int> columnSeries = new ColumnSeries<int>
    {
        Values = new ObservableCollection<int> { 10, 2, 3, 4, 5, 6 },
        Name = "销量",
    };
    private void Button_Click(object sender, RoutedEventArgs e)
    {
        (columnSeries.Values as ObservableCollection<int>).Add(20);
    }

饼图数据的添加如下所示

    public ObservableCollection<ISeries> Series1 { get; set; } = new ObservableCollection<ISeries>()
    {
        new PieSeries<int>{ Values = new int[]{12}, Name="吃饭" },
        new PieSeries<int>{ Values = new int[]{22}, Name="睡觉" },
        new PieSeries<int>{ Values = new int[]{15}, Name="喝水" },
    };
    private void Button_Click(object sender, RoutedEventArgs e)
    {
        Series1.Add(new PieSeries<int> { Values = new int[] { 23 }, Name = "旅游" });
    }

简而言之，如果修改非枚举类型，直接修改即可，如果是可枚举类型，需要使用`ObservableCollection`类而不是`List`或者`Array`

本篇文章来源网络，如有侵权请联系删除！！！！