8、LiveCharts2--坐标数据显示自定义(四)

前言：前面几篇文章介绍了下LiveCharts2的常用控件及其属性，但是x轴的值是数值型并且默认增加的，我们平常在使用折线图的时候横坐标更多的时间或自定义的类型(柱状图)，下面介绍下横坐标除了默认数值类型还有其他的什么类型

其实这个横纵坐标刻度是定义好的，或者说我们可以自定义，比如上一篇文章中说的，可以设置axis的步长(间隔)，我们日常看到的上面显示的数字是我们定义让他那么显示的，意思就是说我们可以让横纵坐标刻度自定义显示，比如显示时间，类别等。

一、ObservablePoint

看这个数据类型的组成：Observable+Point，wpf中有个数据类型是ObservableCollection是一个实现了改变时通知UI功能，然后这个Point是一个点，那就很清晰了，这个数据类型可以实现point改变时通知UI的功能。

实际上他也是这样实现的，不过这个ObservablePoint只能使用double。

    public ISeries[] Series { get; set; } =
    {
        new LineSeries<ObservablePoint>
        {
            Values = new ObservablePoint[]
            {
                new ObservablePoint(0, 4),
                new ObservablePoint(1, 3),
                new ObservablePoint(3, 8),
                new ObservablePoint(18, 6),
                new ObservablePoint(20, 12)
            }
        }
    };

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

这个point就是每个点，如果功能需求要求是point的，这个数据类型非常合适。 

二、LogarithmicPoint

对数点，这个暂时没用到，先不写了，后期用到再补充。

三、axes-labelsFormat

这个柱状图用到的比较多些，笔者本来想用在折线图上面，也不是不可以，只是灵活性不高，不如下面DateTimePoint好用。

    public ISeries[] Series { get; set; } =
    {
        new ColumnSeries<double> { Values = new double[] { 426, 583, 104 } },
        new LineSeries<double>   { Values = new double[] { 200, 558, 458 }, Fill = null },
    };

    public Axis[] XAxes { get; set; } =
    {
        new Axis
        {
            Name = "Salesman/woman",
            NamePaint = new SolidColorPaint { Color = SKColors.Red },
            // 对命名标签或静态标签使用labels属性
            Labels = new string[] { "Sergio", "Lando", "Lewis" }, 
            LabelsRotation = 15
        }
    };

    public Axis[] YAxes { get; set; } =
    {
        new Axis
        {
            Name = "Sales amount",
            NamePadding = new LiveChartsCore.Drawing.Padding(0, 15),

            // 使用Labeler属性为坐标轴值指定格式 
            // Y轴显示将其显示为货币
            // LiveCharts提供了一些常见的格式化程序
            // 在本例中使用的是货币格式。
            Labeler = Labelers.Currency 

            // 用户还可以构建自己的货币格式
            // 例如:
            // Labeler = (value) => value.ToString("C")

            // 但是LiveCharts提供的标签会在以下情况下创建较短的标签：
            // 金额以百万或万亿计
        }
    };

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

XAML中对x轴和y轴进行了绑定，在后台中自定义了x轴和y轴显示数据格式。其实也没啥，就是通过Labels或者Labeler来定义，和HTML中显示柱状图定义x轴很相似。把官网中英文都翻译成中文了，方便大家阅读。

四、axes-labelsFormat2

这个和上一个很像，我看了下，不同的地方就是Label的数据是中文，我把上面的labelsFormat中的Labels换成中文，就显示不出来。

labelsFormat2可以正常显示，因为增加了FontFamily属性。

五、Date Time Scale

这个就比较合适用来显示折线数据了，尤其是横坐标是日期类递增的数据。这里面有个数据类是DateTimePoint，实现了INotifyPropertyChanged接口，承载两个值，一个是DateTime类型，可以通过axis属性自定义来显示，一个是double类型，所以，要想用好这个就需要掌握DateTime数据类型，尤其是格式化那些知识点。

    public ISeries[] Series { get; set; } =
    {
        new ColumnSeries<DateTimePoint>
        {
            TooltipLabelFormatter = (chartPoint) =>
                $"{new DateTime((long) chartPoint.SecondaryValue):MMMM dd}: {chartPoint.PrimaryValue}",
            Values = new ObservableCollection<DateTimePoint>
            {
                new DateTimePoint(new DateTime(2021, 1, 1), 3),
                // notice we are missing the day new DateTime(2021, 1, 2)
                new DateTimePoint(new DateTime(2021, 1, 3), 6),
                new DateTimePoint(new DateTime(2021, 1, 4), 5),
                new DateTimePoint(new DateTime(2021, 1, 5), 3),
                new DateTimePoint(new DateTime(2021, 1, 6), 5),
                new DateTimePoint(new DateTime(2021, 1, 7), 8),
                new DateTimePoint(new DateTime(2021, 1, 8), 6)
            }
        }
    };

    public Axis[] XAxes { get; set; } =
    {
        new Axis
        {
            Labeler = value => new DateTime((long) value).ToString("MMMM dd"),
            LabelsRotation = 15,

            // 使用日期时间类型时，请让动态库知道您的单位，
            //就是说横坐标默认状态线是double类型,并从0开始递增的，
            //设置这个之后就是按时间，
            //比如下面这个是按时间一天作为一个时间单位 
            UnitWidth = TimeSpan.FromDays(1).Ticks, 

            // 如果我们的数据相差几小时我们可以这样设定: 
            // UnitWidth = TimeSpan.FromHours(1).Ticks,

            // 因为所有的月份和年份都有不同的天数
            // 我们可以使用平均值，它不会在用户界面中造成任何可见错误
            // Months: TimeSpan.FromDays(30.4375).Ticks
            // Years: TimeSpan.FromDays(365.25).Ticks

            // MinStep属性强制分隔符大于1天.
            // 就是横坐标显示的刻度跨度是多少，比如下面是按一天一个刻度显示的
            MinStep = TimeSpan.FromDays(1).Ticks 
        }
    };

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

这个很强大的，有时间专门讲下这个的使用。 

六、Time Span Scale

时间戳刻度，暂时还没用，和日期用法差不多，只是日期数据类型是DateTimePoint，这个数据类型是TimeSpanPoint，用好这个就需要掌握TimeSpan的一些用法。

    public ISeries[] Series { get; set; } =
    {
        new ColumnSeries<TimeSpanPoint>
        {
            Values = new ObservableCollection<TimeSpanPoint>
            {
                new TimeSpanPoint(TimeSpan.FromMilliseconds(1), 10),
                new TimeSpanPoint(TimeSpan.FromMilliseconds(2), 6),
             // new TimeSpanPoint(TimeSpan.FromMilliseconds(3), 3),
                new TimeSpanPoint(TimeSpan.FromMilliseconds(4), 12),
                new TimeSpanPoint(TimeSpan.FromMilliseconds(5), 8),
            },
        }
    };

    public Axis[] XAxes { get; set; } =
    {
        new Axis
        {
            Labeler = value => TimeSpan.FromTicks((long)value).ToString("fff") + " ms",

            // when using a date time type, let the library know your unit 
            UnitWidth = TimeSpan.FromMilliseconds(1).Ticks, 

            // if the difference between our points is in hours then we would:
            // UnitWidth = TimeSpan.FromHours(1).Ticks,

            // since all the months and years have a different number of days
            // we can use the average, it would not cause any visible error in the user interface
            // Months: TimeSpan.FromDays(30.4375).Ticks
            // Years: TimeSpan.FromDays(365.25).Ticks

            // The MinStep property forces the separator to be greater than 1 ms.
            MinStep = TimeSpan.FromMilliseconds(1).Ticks, 
        }
    };

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

其实不管是 Date Time Scale还是Time Span Scale，重要的是横坐标显示的格式是什么样的，把横坐标显示格式设置好了身下的就是往对应的point里面填数据了。

六、踩坑

        <StackPanel Grid.Row="1" 
                    Height="800"
                     >
            <!--<lvc:CartesianChart
                Series="{Binding Series}"
                XAxes="{Binding XAxes}"
                YAxes="{Binding YAxes}">
            </lvc:CartesianChart>-->

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

显示不出来，不知道什么原因，把stackpanel换成dockpanel就可以正常显示了。

七、参考文献

7.1 WPF编程，Live Charts使用说明（8）——自定义轴_子不语的博客-CSDN博客_livecharts x轴按顺序