WPF编程，Live Charts使用说明（9）——标签

标签是图表中任何值的任何字符串表示形式，通常将它们放置在轴长上和工具提示中。

后台

using System;
using System.Linq;
using System.Windows;
using System.Windows.Controls;
using LiveCharts;
using LiveCharts.Defaults;
using LiveCharts.Wpf;
 
namespace Wpf.CartesianChart.Labels
{
    /// <summary>
    /// Interaction logic for BarExample.xaml
    /// </summary>
    public partial class LabelsExample : UserControl
    {
        public LabelsExample()
        {
            InitializeComponent();
 
            SeriesCollection = new SeriesCollection
            {
                new ColumnSeries
                {
                    Values = new ChartValues<ObservableValue>
                    {
                        new ObservableValue(4),
                        new ObservableValue(2),
                        new ObservableValue(8),
                        new ObservableValue(2),
                        new ObservableValue(3),
                        new ObservableValue(0),
                        new ObservableValue(1),
                    },
                    DataLabels = true,
                    LabelPoint = point => point.X + "K ," + point.Y
                }
            };
 
            Labels = new[]
            {
                "Shea Ferriera",
                "Maurita Powel",
                "Scottie Brogdon",
                "Teresa Kerman",
                "Nell Venuti",
                "Anibal Brothers",
                "Anderson Dillman"
            };
 
            Formatter = value => value + ".00K items";
 
            DataContext = this;
        }
 
        public SeriesCollection SeriesCollection { get; set; }
        public string[] Labels { get; set; }
        public Func<double, string> Formatter { get; set; }
 
 
        private void UpdateAllOnClick(object sender, RoutedEventArgs e)
        {
            var r = new Random();
 
            foreach (var series in SeriesCollection)
            {
                foreach (var observable in series.Values.Cast<ObservableValue>())
                {
                    observable.Value = r.Next(0, 10);
                }
            }
        }
 
        private void Chart_OnDataClick(object sender, ChartPoint point)
        {
            //point instance contains many useful information...
            //sender is the shape that called the event.
 
            MessageBox.Show("You clicked " + point.X + ", " + point.Y);
          
        }
    }
}

前台

<UserControl x:Class="Wpf.CartesianChart.Labels.LabelsExample"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
             xmlns:local="clr-namespace:Wpf.CartesianChart"
             xmlns:lvc="clr-namespace:LiveCharts.Wpf;assembly=LiveCharts.Wpf"
             xmlns:labels="clr-namespace:Wpf.CartesianChart.Labels"
             mc:Ignorable="d" 
             d:DesignHeight="300" d:DesignWidth="300" d:DataContext="{d:DesignInstance labels:LabelsExample}">
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"></RowDefinition>
            <RowDefinition Height="Auto"></RowDefinition>
            <RowDefinition Height="*"></RowDefinition>
        </Grid.RowDefinitions>
        <TextBlock>Labels</TextBlock>
        <Button Grid.Row="1" Height="30" Click="UpdateAllOnClick">
            Move All
        </Button>
        <lvc:CartesianChart Grid.Row="2" Series="{Binding SeriesCollection}" 
                            DataClick="Chart_OnDataClick">
            <lvc:CartesianChart.AxisX>
                <lvc:Axis LabelsRotation="20" Labels="{Binding Labels}" Position="LeftBottom" >
                    <lvc:Axis.Separator >
                        <lvc:Separator Step="1"></lvc:Separator>
                    </lvc:Axis.Separator>
                </lvc:Axis>
            </lvc:CartesianChart.AxisX>
            <lvc:CartesianChart.AxisY>
                <lvc:Axis Title="Sold Items" LabelFormatter="{Binding Formatter}" Position="RightTop"></lvc:Axis>
            </lvc:CartesianChart.AxisY>
        </lvc:CartesianChart>
    </Grid>
</UserControl>

LiveCharts中有两种类型的标签：“格式化”标签和“映射”标签。

格式化标签

当图表值和标签之间有直接转换时，格式化标签非常有用：
Axis.LabelFormatter属性存储一个以双精度值作为参数并返回字符串的函数，LiveCharts每次需要将图表值显示为字符串时都将使用此函数。

MyAxis.LabelFormatter = val => val.ToString("C"); //as currency
MyAxis.LabelFormatter = val => val + "°"; //as degrees
MyAxis.LabelFormatter = val => val + ".00 items sold"; //or any other custom format

映射标签

映射标签通常可用于使用名称映射位置，例如，当第一个点属于John，第二个属于Susan，第三个属于Charles时。

<lvc:BarChart>
  <lvc:BarChart.AxisX>
    <lvc:Axis Title="Month" Labels="John, Susan, Charles" />
  </lvc:BarChart.AxisX>
</lvc:BarChart>

映射标签意味着轴值将由Axis.Labels属性中的字符串表示，Axis.Labels类型为IList ，因此当轴值为0时，当值eq时标签将为Labels [0] 1>标签[1]，值eq 2>标签[2]，值eq 3>标签[3]，…，值eq n >标签[ n ]。
请注意，如果轴值大于Labels.Count，将返回一个空字符串。
Axis.Labels隐藏Axis.LabelFormatter，因此，如果Axis.Labels不为null，则标签将从Axis.Labels中拉出；如果Axis.Labels为null，则LiveCharts将使用格式化程序；如果两个均为null，则将使用原始值作为标签。

数据标签

每当您在序列的每个点上都需要一个标签时（如图所示），请将Series.DataLabels属性设置为true。

如有必要，还可以使用Series.LabelPoint属性来自 定义DataLabel。

new ColumnSeries
{
   Values = new ChartValues<double> { 4, 2, 8, 2, 3, 0, 1 },
   DataLabels = true,
   LabelPoint = point => point.Y + "K"
}

旋转标签

有时您的标签很长，并且您需要优化空间，在这种情况下，您可以旋转任何轴标签。您可以使用任何角度，甚至可以使用负角。

<lvc:CartesianChart Grid.Row="2" Series="{Binding SeriesCollection}">
  <lvc:CartesianChart.AxisX>
    <lvc:Axis LabelsRotation="13" Labels="{Binding Labels}">
      <lvc:Axis.Separator>
        <lvc:Separator IsEnabled="False" Step="1">
          </lvc:Separator>
        </lvc:Axis.Separator>
      </lvc:Axis>
    </lvc:CartesianChart.AxisX>
  <lvc:CartesianChart.AxisY>
</lvc:CartesianChart>