InteractiveDataDisplay曲线图控件的使用

官网

https://github.com/microsoft/InteractiveDataDisplay.WPF

安装

Install-Package InteractiveDataDisplay.WPF

前台代码

 

<Window
    x:Class="InteractiveDataDisplayDemo.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:d3="clr-namespace:InteractiveDataDisplay.WPF;assembly=InteractiveDataDisplay.WPF"
    xmlns:local="clr-namespace:InteractiveDataDisplayDemo"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    Title="MainWindow"
    Width="800"
    Height="450"
    mc:Ignorable="d">
    <Grid>
        <d3:Chart BottomTitle="Argument" LeftTitle="Function">
            <d3:LineGraph
                x:Name="linegraph"
                Description="Simple linegraph"
                Stroke="Blue"
                StrokeThickness="3" />
        </d3:Chart>
    </Grid>
</Window>

 

后台代码

using System;
using System.Linq;
using System.Windows;

namespace InteractiveDataDisplayDemo
{
    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();

            var x = Enumerable.Range(0, 1001).Select(i => i / 10.0).ToArray();
            var y = x.Select(v => Math.Abs(v) < 1e-10 ? 1 : Math.Sin(v) / v).ToArray();
            linegraph.Plot(x, y); // x and y are IEnumerable<double>
        }
    }
}

运行效果

 

性能测试

前台代码：

<Window
    x:Class="RealtimeLineGraphSample.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:d3="clr-namespace:InteractiveDataDisplay.WPF;assembly=InteractiveDataDisplay.WPF"
    xmlns:local="clr-namespace:RealtimeLineGraphSample"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    Title="实时曲线图"
    Width="800"
    Height="450"
    WindowStartupLocation="CenterScreen"
    mc:Ignorable="d">
    <Window.Resources>
        <local:VisibilityToCheckedConverter x:Key="VisibilityToCheckedConverter" />
    </Window.Resources>

    <Grid x:Name="LayoutRoot" Background="White">
        <d3:Chart Name="plotter" IsXAxisReversed="True">
            <d3:Chart.Title>
                <TextBlock
                    Margin="0,5,0,5"
                    HorizontalAlignment="Center"
                    FontSize="18">
                    Line graph legend sample
                </TextBlock>
            </d3:Chart.Title>
            <d3:Chart.LegendContent>
                <d3:LegendItemsPanel>
                    <d3:LegendItemsPanel.Resources>
                        <DataTemplate x:Key="InteractiveDataDisplay.WPF.LineGraph">
                            <StackPanel Orientation="Horizontal">
                                <CheckBox IsChecked="{Binding Path=Visibility, Converter={StaticResource VisibilityToCheckedConverter}, Mode=TwoWay}" />
                                <Line
                                    Width="15"
                                    Height="15"
                                    Stroke="{Binding Path=Stroke}"
                                    StrokeThickness="2"
                                    X1="0"
                                    X2="15"
                                    Y1="0"
                                    Y2="15" />
                                <TextBlock Margin="5,0,0,0" Text="{Binding Path=Description}" />
                            </StackPanel>
                        </DataTemplate>
                    </d3:LegendItemsPanel.Resources>
                </d3:LegendItemsPanel>
            </d3:Chart.LegendContent>
            <Grid Name="lines" />
        </d3:Chart>
    </Grid>
</Window>

后台代码：

using InteractiveDataDisplay.WPF;
using System;
using System.Collections.Generic;
using System.Windows;
using System.Windows.Data;
using System.Windows.Media;
using System.Windows.Threading;

namespace RealtimeLineGraphSample
{
    /// <summary>
    /// MainWindow.xaml 的交互逻辑
    /// </summary>
    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();

            var lg = new LineGraph();
            lines.Children.Add(lg);
            lg.Stroke = new SolidColorBrush(Color.FromArgb(255, 0, 0, 0));
            lg.Description = String.Format("Data series {0}", 1);
            lg.StrokeThickness = 2;

            Random random = new Random();

            var myList = new List<double>();
            for (int i = 0; i < 1000; i++)
            {
                myList.Add(random.NextDouble());
            }
            lg.PlotY(myList);

            DispatcherTimer timer = new DispatcherTimer();
            timer.Interval = TimeSpan.FromMilliseconds(100);
            timer.Tick += (s, e) =>
            {
                myList.Add(random.NextDouble());
                lg.PlotY(myList);
            };
            timer.Start();

            this.Closing += (s, e) => timer.Stop();
        }
    }

    public class VisibilityToCheckedConverter : IValueConverter
    {
        public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
        {
            return ((Visibility)value) == Visibility.Visible;
        }

        public object ConvertBack(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
        {
            return ((bool)value) ? Visibility.Visible : Visibility.Collapsed;
        }
    }
}

相当于总共1000个点，然后每100毫秒加1个点，曲线图已经有点卡了。

貌似性能不能满足日常的使用要求。