6、LiveCharts--图表类型及示例复现(二)

前言：上一篇介绍了LiveChart的变迁及简单实用，这一篇介绍下Wpf中常用的一些属性。

一、Chart类型

主要有4大类，分别是CartesianChart(笛卡尔图)、PieChart(饼状图)、PolarChart(极坐标图)、GeoMap(地理地图)。

1.1 CartesianChart(笛卡尔图)

笛卡尔：伟大的数学家，发明了笛卡尔坐标系(和牛顿一起)，也称为直角坐标系。遵循笛卡尔网格的轴被称为"笛卡尔轴"，直角坐标轴用于折线图、条形图和气泡图等。

1.2  PieChart(饼状图)

这个好理解，不多做解释。

1.3 PolarChart(极坐标图)

极坐标图类型是一个圆形图，在该图上使用角度和距中心点的距离显示数据点。X轴位于圆的边界上，Y轴连接圆的中心和X轴。

1.4 GeoMap(地理地图)

手机导航了解下

二、示例复现

上面为什么要把Chart分成4大类，因为在Xaml中引用控件时只能使用这4大类，每大类下面的小类通过Series进行呈现。

2.1 CartesianChart(笛卡尔图)

CartesianChart下属的Chart有多个，如下，对应的Chart样式如1.1中所示。

using LiveChartsCore;
using LiveChartsCore.SkiaSharpView;

namespace ViewModelsSamples.Bars.Basic
{
    public class ViewModel
    {
        public ISeries[] LineSeriesM { get; set; } =new ISeries[] 
        {
            //220712 komla 折线图
            new LineSeries<double>
            {
                Values=new double[]{ 2, 1, 3, 5, 3, 4, 6 },
                Fill=null
            }  
        };
        
        /// <summary>
        /// 220713 komla 柱状图
        /// </summary>
        public ISeries[] ColumnSeriesM { get; set; } = new ISeries[]
        {
            new ColumnSeries<double>
            {
                Name = "柱状图",
                Values = new double[] { 2, 5, 4, -2, 4, -3, 5 }
            }
        };

        /// <summary>
        /// ScatterChart
        /// </summary>
        public ISeries[] ScatterSeriesM { get; set; } = new ISeries[]
        {
            new ScatterSeries<double>
            {
                Name = "ScatterChart",
                Values=new double[]{ 3, 1, 6, 5, 2, 2, 7 },
                Fill =null
            },
        };

        /// <summary>
        /// StepLineChart
        /// </summary>
        public ISeries[] StepLineSeriesM { get; set; } = new ISeries[]
        {
            new StepLineSeries<double>
            {
                Name = "StepLineChart",
                Values=new double[]{ 5, 3, 8, 2, 3, 7, 5 },
                Fill = null
            },
        };

        /// <summary>
        /// HeatChart
        /// </summary>
        public ISeries[] HeatSeriesM { get; set; } = new ISeries[]
        {
            new HeatSeries<double>
            {
                Name = "HeatChart",
                Values=new double[]{ 6, 4, 1, 6, 8, 3, 8 },
                //Fill = null
            },
        };

        /// <summary>
        /// CandlesticksChart
        /// </summary>
        public ISeries[] CandlesticksSeriesM { get; set; } = new ISeries[]
        {
            new CandlesticksSeries<double>
            {
                Name = "CandlesticksChart",  
                Values=new double[]{ 3, 7, 9, 5, 4, 6, 1 },
                //Fill = null
            },
        };

        /// <summary>
        /// StackedColumnChart
        /// </summary>
        public ISeries[] StackedColumnSeriesM { get; set; } = new ISeries[]
        {
            new StackedColumnSeries<double>
            {
                Name = "StackedColumnChart",
                Values=new double[]{ 3, 2, 5, 7, 4, 6, 2 },
            }
        };
        
        /// <summary>
        /// StackedAreaChart
        /// </summary>
        public ISeries[] StackedAreaSeriesM { get; set; } = new ISeries[]
        {
            new StackedAreaSeries<double>
            {
                Name = "StackedAreaChart",
                Values=new double[]{ 2, 6, 8, 3, 4, 1, 5 },
            },
        };
    }
}

        <StackPanel Grid.Row="1" Orientation="Vertical">
            <lvc:CartesianChart Height="100"
                Series="{Binding LineSeriesM}" />
            <lvc:CartesianChart Height="120"
                Series="{Binding ColumnSeriesM}" />
            <lvc:CartesianChart Height="120"
                Series="{Binding ScatterSeriesM}" />
            <lvc:CartesianChart Height="120"
                Series="{Binding StepLineSeriesM}" />
            <lvc:CartesianChart Height="120"
                Series="{Binding HeatSeriesM}" />
            <lvc:CartesianChart Height="120"
                Series="{Binding CandlesticksSeriesM}" />
            <lvc:CartesianChart Height="120"
                Series="{Binding StackedColumnSeriesM}" />
            <lvc:CartesianChart Height="120"
                Series="{Binding StackedAreaSeriesM}" /> 
        </StackPanel>

 

都放一个界面上面显示有点问题。

2.2  PieChart(饼状图)

饼状图没笛卡尔图这么多类型，但是表现形式却是多种多样，比如带有分割的、仪表盘等。

下面就最基本的复现下 

        public ISeries[] PieSeriesM { get; set; } = new ISeries[]
        {
            new PieSeries<double> { Values = new double[] { 2 } },
            new PieSeries<double> { Values = new double[] { 4 } },
            new PieSeries<double> { Values = new double[] { 1 } },
            new PieSeries<double> { Values = new double[] { 4 } },
            new PieSeries<double> { Values = new double[] { 3 } }
        };

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

2.3  PolarChart(极坐标图)

和饼图差不多，也没这么多类型

        /// <summary>
        /// 极坐标图
        /// </summary>
        public ISeries[] PolarLineSeriesM { get; set; } = new[]
        {
            new PolarLineSeries<double>
            {
                Values = new double[] { 15, 14, 13, 12, 11, 10, 9, 8, 7, 6, 5, 4, 3, 2, 1                         },
                Fill = null,
                IsClosed = false
            }
        };

<lvc:PolarChart Height="400"
                Series="{Binding PolarLineSeriesM}" /> 

 

2.4  GeoMap(地理地图)

同理，和饼状、极坐标差不多，类型没笛卡尔那么多 。

        /// <summary>
        /// GeoMap
        /// </summary>
        public HeatLandSeries[] GeoMapSeriesM { get; set; }
            = new HeatLandSeries[]
        {
            new HeatLandSeries
            {
                // every country has a unique identifier
                // check the "shortName" property in the following
                // json file to assign a value to a country in the heat map
                // https://github.com/beto-rodriguez/LiveCharts2/blob/master/docs/_assets/word-map-index.json
                Lands = new HeatLand[]
                {
                    new HeatLand { Name = "bra", Value = 13 },
                    new HeatLand { Name = "mex", Value = 10 },
                    new HeatLand { Name = "usa", Value = 15 },
                    new HeatLand { Name = "deu", Value = 13 },
                    new HeatLand { Name = "fra", Value = 8 },
                    new HeatLand { Name = "kor", Value = 10 },
                    new HeatLand { Name = "zaf", Value = 12 },
                    new HeatLand { Name = "are", Value = 13 }
                }
            }
        };

<lvc:GeoMap Height="400"
            Series="{Binding GeoMapSeriesM}" />