WPF编程，Live Charts使用说明（42）——可视化点值

默认情况下，所有图表在添加/删除序列或值时都会更新并设置动画。
但每次值更改时都需要更新图表时会发生什么呢？在这种情况下，必须实现 IObservableChartPoint，这将使值能够在图表每次更改时通知更新。

数据类

public class ObservableValue : IObservableChartPoint
{
    private double _value;        
 
    public event Action PointChanged;
 
    public double Value
    {
       get { return _value; }
       set
       {
            _value = value;
            OnPointChanged();
        }
    }
 
    protected void OnPointChanged()
    {
        if (PointChanged != null) PointChanged.Invoke();
    }
}

代码显示了已配置的ObservableValue类中的重要部分 ，该类能够在每次Value属性更改时通知图表进行更新。

后台：

```csharp
using System;
using System.Linq;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Media;
using LiveCharts;
using LiveCharts.Defaults;
using LiveCharts.Wpf;
 
namespace Wpf.CartesianChart.FullyResponsive
{
    public partial class FullyResponsiveExample : UserControl
    {
        public FullyResponsiveExample()
        {
            InitializeComponent();
 
            MyValues = new ChartValues<ObservableValue>
            {
                new ObservableValue(5),
                new ObservableValue(7),
                new ObservableValue(8),
                new ObservableValue(3)
            };
 
            var lineSeries = new LineSeries
            {
                Values = MyValues,
                StrokeThickness = 4,
                Fill = Brushes.Transparent,
                PointGeometrySize = 0,
                DataLabels = true
            };
 
            SeriesCollection = new SeriesCollection {lineSeries};
 
            DataContext = this;
        }
 
        public ChartValues<ObservableValue> MyValues { get; set; }
        public SeriesCollection SeriesCollection { get; set; }
 
        private void AddPointOnClick(object sender, RoutedEventArgs e)
        {
            var r = new Random();
            MyValues.Add(new ObservableValue(r.Next(-20, 20)));
        }
 
        private void InsertPointOnClick(object sender, RoutedEventArgs e)
        {
            var r = new Random();
            if (MyValues.Count > 3)
                MyValues.Insert(2, new ObservableValue(r.Next(-20, 20)));
        }
 
        private void RemovePointOnClick(object sender, RoutedEventArgs e)
        {
            MyValues.RemoveAt(0);
        }
 
        private void AddSeriesOnClick(object sender, RoutedEventArgs e)
        {
            //Yes it also listens for series changes
            var r = new Random();
 
            var c = SeriesCollection[0].Values.Count;
 
            var val = new ChartValues<ObservableValue>();
 
            for (int i = 0; i < c; i++)
            {
                val.Add(new ObservableValue(r.Next(-20, 20)));
            }
 
            SeriesCollection.Add(new LineSeries
            {
                Values = val,
                StrokeThickness = 4,
                Fill = Brushes.Transparent,
                PointGeometrySize = 0
            });
        }
 
        private void RemoveSeriesOnClick(object sender, RoutedEventArgs e)
        {
            var s = SeriesCollection.Where(x => x.Values != MyValues).ToList();
            if (s.Count > 0) SeriesCollection.RemoveAt(1);
        }
 
        private void MoveAllOnClick(object sender, RoutedEventArgs e)
        {
            var r = new Random();
 
            foreach (var observable in MyValues)
            {
                observable.Value = r.Next(-20, 20);
            }
        }
    }
}

前台：

<UserControl x:Class="Wpf.CartesianChart.FullyResponsive.FullyResponsiveExample"
             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:fullyResponsive="clr-namespace:Wpf.CartesianChart.FullyResponsive"
             mc:Ignorable="d" 
             d:DesignHeight="300" d:DesignWidth="300" d:DataContext="{d:DesignInstance fullyResponsive:FullyResponsiveExample}">
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"></RowDefinition>
            <RowDefinition Height="Auto"></RowDefinition>
            <RowDefinition Height="*"></RowDefinition>
        </Grid.RowDefinitions>
        <TextBlock TextWrapping="Wrap">
            Fully Responsive
        </TextBlock>
        <StackPanel Grid.Row="1" Orientation="Horizontal">
            <TextBlock VerticalAlignment="Center" Margin="0 0 10 0">Points</TextBlock>
            <Button Click="AddPointOnClick">+</Button>
            <Button Click="InsertPointOnClick">/</Button>
            <Button Click="RemovePointOnClick">-</Button>
            <Button Click="MoveAllOnClick">MoveAll</Button>
            <TextBlock Margin="0 0 10 0" VerticalAlignment="Center">Series</TextBlock>
            <Button Click="AddSeriesOnClick">+</Button>
            <Button Click="RemoveSeriesOnClick">-</Button>
        </StackPanel>
        <lvc:CartesianChart Grid.Row="2" Series="{Binding SeriesCollection}" LegendLocation="Right"></lvc:CartesianChart>
    </Grid>
</UserControl>