WPF中使用InteractiveDataDisplay控件画图

前路漫漫其修远兮

5141人浏览 · 2019-12-07 10:40:55

前路漫漫其修远兮 · 2019-12-07 10:40:55 发布

在网址GitHub下载InteractiveDataDisplay
1 SyncGraphsSample
在这里插入图片描述

<Window x:Class="SyncGraphsSample.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:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:d3="clr-namespace:InteractiveDataDisplay.WPF;assembly=InteractiveDataDisplay.WPF"
        xmlns:local="clr-namespace:SyncGraphsSample"
        mc:Ignorable="d"
        Title="Sync graphs" Height="600" Width="800">
    <Grid x:Name="LayoutRoot" Background="White">
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="*"/>
            <RowDefinition Height="5"/>
            <RowDefinition Height="*"/>
            <RowDefinition Height="Auto"/>
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="Auto"/>
            <ColumnDefinition Width="*"/>
            <ColumnDefinition Width="5"/>
            <ColumnDefinition Width="*"/>
            <ColumnDefinition Width="Auto"/>
        </Grid.ColumnDefinitions>

        <TextBlock Grid.Row="0" Grid.ColumnSpan="4" Text="Syncronized figures sample" TextAlignment="Center" FontSize="18" Margin="5"/>

        <d3:Figure x:Name="leftPlotter" Grid.Row="1" Grid.Column="1" PlotOriginY="{Binding PlotOriginY,ElementName=centerPlotter,Mode=TwoWay}" PlotHeight="{Binding PlotHeight,ElementName=centerPlotter,Mode=TwoWay}">
            <d3:PlotAxis AxisOrientation="Left" d3:Figure.Placement="Left"/>
            <d3:PlotAxis AxisOrientation="Top" d3:Figure.Placement="Top"/>
            <d3:CircleMarkerGraph x:Name="circles"/>
            <d3:MouseNavigation/>
            <Border BorderThickness="0.5" BorderBrush="Black"/>
        </d3:Figure>

        <d3:Figure x:Name="centerPlotter" Grid.Column="3" Grid.Row="1">
            <d3:PlotAxis AxisOrientation="Right"  d3:Figure.Placement="Right"/>
            <d3:PlotAxis AxisOrientation="Top" d3:Figure.Placement="Top"/>
            <d3:LineGraph x:Name="lineGraph1"/>
            <d3:MouseNavigation/>
            <Border BorderThickness="0.5" BorderBrush="Black"/>
        </d3:Figure>

        <d3:Figure x:Name="bottomPlotter" Grid.Column="3" Grid.Row="3" PlotOriginX="{Binding PlotOriginX,ElementName=centerPlotter,Mode=TwoWay}" PlotWidth="{Binding PlotWidth,ElementName=centerPlotter,Mode=TwoWay}">
            <d3:PlotAxis AxisOrientation="Right"  d3:Figure.Placement="Right"/>
            <d3:PlotAxis AxisOrientation="Bottom"  d3:Figure.Placement="Bottom"/>
            <d3:MouseNavigation/>
            <d3:BarGraph x:Name="barGraph"/>
            <Border BorderThickness="0.5" BorderBrush="Black"/>
        </d3:Figure>

        <ContentControl Grid.Column="1" Grid.Row="3" VerticalContentAlignment="Center" 
                        HorizontalContentAlignment="Center" Margin="20,20,20,20">
            <TextBlock FontSize="14" TextWrapping="Wrap" TextAlignment="Center" >These three Charts have shared axes. Two of the share
            vertical axis, two - horizontal. Navigate in one plot and see how other is changed. This is done purely in 
            XAML.</TextBlock>
        </ContentControl>
    </Grid>
</Window>

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

namespace SyncGraphsSample
{
    /// <summary>
    /// Interaction logic for MainWindow.xaml
    /// </summary>
    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();

            barGraph.PlotBars(Enumerable.Range(1, 10));

            int N = 25;
            Random r = new Random();
            double[] x = new double[N];
            double[] y = new double[N];
            for (int i = 0; i < N; i++)
            {
                x[i] = r.NextDouble() * 12 - 1;
                y[i] = r.NextDouble() * 12 - 1;
            }
            circles.PlotXY(x, y);

            double[] x1 = Enumerable.Range(0, 90).Select(i => i / 10.0).ToArray();
            double[] y1 = x1.Select(v => 7 * (Math.Abs(v) < 1e-10 ? 1 : Math.Sin(v) / v) + 1).ToArray();
            lineGraph1.Stroke = new SolidColorBrush(Colors.Green);
            lineGraph1.StrokeThickness = 2.0;
            lineGraph1.Plot(x1, y1);
        }
    }
}

2.LineGraphSample
在这里插入图片描述

<Window x:Class="LineGraphSample.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:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:d3="clr-namespace:InteractiveDataDisplay.WPF;assembly=InteractiveDataDisplay.WPF"
        xmlns:local="clr-namespace:LineGraphSample"
        mc:Ignorable="d"
        Title="Line graph" Height="600" Width="800">
    <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 HorizontalAlignment="Center" FontSize="18" Margin="0,5,0,5">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" X1="0" Y1="0" X2="15" Y2="15" Stroke="{Binding Path=Stroke}" StrokeThickness="2"/>
                                <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>

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

            double[] x = new double[200];
            for (int i = 0; i < x.Length; i++)
                x[i] = 3.1415 * i / (x.Length - 1);

            for (int i = 0; i < 25; i++)
            {
                var lg = new LineGraph();
                lines.Children.Add(lg);
                lg.Stroke = new SolidColorBrush(Color.FromArgb(255, 0, (byte)(i * 10), 0));
                lg.Description = String.Format("Data series {0}", i + 1);
                lg.StrokeThickness = 2;
                lg.Plot(x, x.Select(v => Math.Sin(v + i / 10.0)).ToArray());
            }
        }
    }

    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;
        }
    }

3.BarChartSample
在这里插入图片描述

<Window x:Class="BarChartSample.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:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:d3="clr-namespace:InteractiveDataDisplay.WPF;assembly=InteractiveDataDisplay.WPF"
        mc:Ignorable="d"
        Title="Bar chart" Height="600" Width="800">
    <Grid>
        <d3:Chart Name="plotter">
            <d3:Chart.Title>
                <TextBlock HorizontalAlignment="Center" FontSize="18" Margin="0,5,0,5">Bar chart sample</TextBlock>
            </d3:Chart.Title>
            <d3:BarGraph Name="barChart" Color="Blue"/>
        </d3:Chart>
    </Grid>
</Window>

 public MainWindow()
        {
            InitializeComponent();

            int N = 100;
            double[] y = new double[N];

            Random r = new Random();
            double k;

            for (int i = 0; i < N; i++)
            {
                k = r.NextDouble();
                y[i] = k < 0.5 ? r.Next(100) : -r.Next(100);
            }
            barChart.PlotBars(y);
        }