如何使用DynamicDataDisplay在wpf中的一个x-y平面中添加多重图 [英] How to add mutiple graph in one x-y plane in wpf using DynamicDataDisplay

问题描述

我必须创建多个这样的图形

XAML:

 < Grid>< d3:ChartPlotter x:Name ="plotter" Grid.Row ="1" Grid.Column ="1"><！-< d3:ChartPlotter.Horizo​​ntalAxis>< d3:Horizo​​ntalDateTimeAxis Name ="dateAxis"/></d3:ChartPlotter.Horizo​​ntalAxis>->< d3:Header FontFamily =乔治亚" Content =电压图表"/>< d3:VerticalAxisTitle FontFamily =乔治亚" Content =电压[V]"/>< d3:Horizo​​ntalAxisTitle FontFamily =乔治亚" Content =时间"/>< d3:Horizo​​ntalLine Value ="{Binding MaxVoltage}" Stroke ="Red" StrokeThickness ="2"/>< d3:Horizo​​ntalLine Value ="{Binding MinVoltage}" Stroke ="Red" StrokeThickness ="2"/></d3:ChartPlotter></Grid> 

MainWindow:

 公共子类MainWindow:Window，INotifyPropertyChanged{List< double>points_x_y_Graph1 = new List< double>(){0.1，0.2，0.3，0.4，0.5，0.6，0.7，0.8，0.9，1.0，0.9，0.8，0.7};List< double>points_x_y_Graph2 = new List double(){0.9，0.8，0.7，0.6，0.5，0.4，0.3，0.2，0.1，0.0，0.1，0.2，0.3};private int _maxVoltage;private int _minVoltage;公共int MaxVoltage{得到{return _maxVoltage;}设置{_maxVoltage =值;this.OnPropertyChanged("MaxVoltage");}}公共int MinVoltage{得到{return _minVoltage;}设置{_minVoltage =值;this.OnPropertyChanged("MinVoltage");}}public VoltagePointCollection voltagePointCollection1;public VoltagePointCollection voltagePointCollection2;DispatcherTimer updateCollectionTimer;私人诠释i = 0;公共MainWindow(){InitializeComponent();this.DataContext = this;updateCollectionTimer =新的DispatcherTimer();updateCollectionTimer.Interval = TimeSpan.FromMilliseconds(500);updateCollectionTimer.Tick + =新的EventHandler(updateCollectionTimer_Tick);updateCollectionTimer.Start();voltagePointCollection1 =新的VoltagePointCollection();var ds1 = new EnumerableDataSource< VoltagePoint>(voltagePointCollection1);ds1.SetXMapping(x => x.time);ds1.SetYMapping(y => y.Voltage);plotter.AddLineGraph(ds1，Colors.Green，2，伏1");MaxVoltage = 1;MinVoltage = -1;voltagePointCollection2 =新的VoltagePointCollection();var ds2 = new EnumerableDataSource< VoltagePoint>(voltagePointCollection2);ds2.SetXMapping(x => x.time);ds2.SetYMapping(y => y.Voltage);plotter.AddLineGraph(ds2，Colors.Blue，2，伏2");}void updateCollectionTimer_Tick(对象发送者，EventArgs e){如果(i< points_x_y_Graph1.Count){//{i = 0;}//对于第一个图voltagePointCollection1.Add(新的VoltagePoint(points_x_y_Graph1 [i]，i));//对于第二张图voltagePointCollection2.Add(新的VoltagePoint(points_x_y_Graph2 [i]，i));//再添加一张图i ++;}}#region INotifyPropertyChanged成员公共事件PropertyChangedEventHandler PropertyChanged;受保护的void OnPropertyChanged(string propertyName){如果(PropertyChanged！= null)this.PropertyChanged(this，new System.ComponentModel.PropertyChangedEventArgs(propertyName));}#endregion} 

I have to create more than one graph like this http://prntscr.com/dfn836 (We have 4 graph in one plane in different colors) using WPF.

I have got DynamicDataDisplaySample which displays only one sinusoidal graph but my situation is i have to display more than one graph(lets say to here) in same x-y axis (Voltage-Time axis). I have set of points to make the both graphs in same plane.

  List<double> points_x_y_Graph1 = new List<double>() { 0.1, 0.2, 0.3, 0.4, 0.5, 0.6, 0.7, 0.8, 0.9, 1.0, 0.1, 0.2, 0.3 };
  List<double> points_x_y_Graph2 = new List<double>() { 0.9, 0.8, 0.7, 0.6, 0.5, 0.4, 0.3, 0.2, 0.1, 0.0,0.1, 0.2, 0.3 };

What i have in my mind about how to make two graphs in one Volt-Time axis is adding the points for both the graph like this:

//This is for first graph
voltagePointCollection.Add(new VoltagePoint(points_x_y_Graph2[i], points_x_y_Graph2[i]));
//This is for second Graph
voltagePointCollection.Add(new VoltagePoint(points_x_y_Graph1[i], points_x_y_Graph1[i])); 

But what i found(see here http://prntscr.com/dfsy5e).

My full code is :

 public partial class MainWindow : Window, INotifyPropertyChanged
    {
        List<double> points_x_y_Graph1 = new List<double>() { 0.1, 0.2, 0.3, 0.4, 0.5, 0.6, 0.7, 0.8, 0.9, 1.0, 0.1, 0.2, 0.3 };
        List<double> points_x_y_Graph2 = new List<double>() { 0.9, 0.8, 0.7, 0.6, 0.5, 0.4, 0.3, 0.2, 0.1, 0.0,0.1, 0.2, 0.3 };
        private int _maxVoltage; private int _minVoltage;
        public int MaxVoltage
        {
            get { return _maxVoltage; }
            set { _maxVoltage = value; this.OnPropertyChanged("MaxVoltage"); }
        }       
        public int MinVoltage
        {
            get { return _minVoltage; }
            set { _minVoltage = value; this.OnPropertyChanged("MinVoltage"); }
        }

        public VoltagePointCollection voltagePointCollection;
        DispatcherTimer updateCollectionTimer;
        private int i = 0;

        public MainWindow()
        {
            InitializeComponent();
            this.DataContext = this;

            voltagePointCollection = new VoltagePointCollection();

            updateCollectionTimer = new DispatcherTimer();
            updateCollectionTimer.Interval = TimeSpan.FromMilliseconds(10);
            updateCollectionTimer.Tick += new EventHandler(updateCollectionTimer_Tick);
            updateCollectionTimer.Start();         

            var ds = new EnumerableDataSource<VoltagePoint>(voltagePointCollection);
            ds.SetXMapping(x => x.time);
            ds.SetYMapping(y => y.Voltage);  

            plotter.AddLineGraph(ds, Colors.Green, 2, "Volts"); 
            MaxVoltage = 1;
            MinVoltage = -1;            
        }

        void updateCollectionTimer_Tick(object sender, EventArgs e)
        {
            if (i >= points_x_y.Count) 
            { i = 0; }
        //For first graph
        voltagePointCollection.Add(new VoltagePoint(points_x_y_Graph2[i], points_x_y_Graph2[i]));
        //For second graph
        voltagePointCollection.Add(new VoltagePoint(points_x_y_Graph1[i], points_x_y_Graph1[i])); // To add one more graph
            i++;
        }       

        #region INotifyPropertyChanged members
        public event PropertyChangedEventHandler PropertyChanged;
        protected void OnPropertyChanged(string propertyName)
        {
            if (PropertyChanged != null)
                this.PropertyChanged(this, new System.ComponentModel.PropertyChangedEventArgs(propertyName));
        }
        #endregion
    }

Xaml code:

<Window x:Class="DynamicDataDisplaySample.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d3="http://research.microsoft.com/DynamicDataDisplay/1.0"
        Title="MainWindow" Height="600" Width="800">
    <Grid>
        <d3:ChartPlotter x:Name="plotter" Grid.Row="1" Grid.Column="1">
            <d3:ChartPlotter.HorizontalAxis>
                <d3:HorizontalDateTimeAxis Name="dateAxis"/>
            </d3:ChartPlotter.HorizontalAxis>
            <d3:Header FontFamily="Georgia" Content="Voltage chart"/>
            <d3:VerticalAxisTitle FontFamily="Georgia" Content="Voltage [V]" />
            <d3:HorizontalAxisTitle FontFamily="Georgia" Content="Time"/>
            <d3:HorizontalLine Value="{Binding MaxVoltage}" Stroke="Red" StrokeThickness="2"/>
            <d3:HorizontalLine Value="{Binding MinVoltage}" Stroke="Red" StrokeThickness="2"/>
        </d3:ChartPlotter>
    </Grid>
</Window>

Other two classes :

 public class VoltagePointCollection : RingArray <VoltagePoint>
    {
        private const int TOTAL_POINTS = 300;

        public VoltagePointCollection()
            : base(TOTAL_POINTS) // here i set how much values to show 
        {    
        }
    }

    public class VoltagePoint
    {        
        public DateTime Date { get; set; }
        public double time { get; set; }

        public double Voltage { get; set; }

        public VoltagePoint(double voltage, double time)
        {
            this.Voltage = voltage;
            this.time = time;
        }
    }

How to make these two plots of graph in one x-y axis like the link shown at starting which contains 4 graphs in one x-y axis.

解决方案

Basically you need a second call to AddLineGraph, with corresponding associated data. I made some minimal modifications just enough to get it working, including your data. Please see below:

XAML:

<Grid>
    <d3:ChartPlotter x:Name="plotter" Grid.Row="1" Grid.Column="1">
        <!--
        <d3:ChartPlotter.HorizontalAxis>
            <d3:HorizontalDateTimeAxis Name="dateAxis"/>
        </d3:ChartPlotter.HorizontalAxis>
        -->
        <d3:Header FontFamily="Georgia" Content="Voltage chart"/>
        <d3:VerticalAxisTitle FontFamily="Georgia" Content="Voltage [V]" />
        <d3:HorizontalAxisTitle FontFamily="Georgia" Content="Time"/>
        <d3:HorizontalLine Value="{Binding MaxVoltage}" Stroke="Red" StrokeThickness="2"/>
        <d3:HorizontalLine Value="{Binding MinVoltage}" Stroke="Red" StrokeThickness="2"/>
    </d3:ChartPlotter>
</Grid>

MainWindow:

public partial class MainWindow : Window, INotifyPropertyChanged
{
    List<double> points_x_y_Graph1 = new List<double>() { 0.1, 0.2, 0.3, 0.4, 0.5, 0.6, 0.7, 0.8, 0.9, 1.0, 0.9, 0.8, 0.7 };
    List<double> points_x_y_Graph2 = new List<double>() { 0.9, 0.8, 0.7, 0.6, 0.5, 0.4, 0.3, 0.2, 0.1, 0.0, 0.1, 0.2, 0.3 };
    private int _maxVoltage; private int _minVoltage;

    public int MaxVoltage
    {
        get { return _maxVoltage; }
        set { _maxVoltage = value; this.OnPropertyChanged("MaxVoltage"); }
    }
    public int MinVoltage
    {
        get { return _minVoltage; }
        set { _minVoltage = value; this.OnPropertyChanged("MinVoltage"); }
    }

    public VoltagePointCollection voltagePointCollection1;
    public VoltagePointCollection voltagePointCollection2;
    DispatcherTimer updateCollectionTimer;
    private int i = 0;

    public MainWindow()
    {
        InitializeComponent();
        this.DataContext = this;


        updateCollectionTimer = new DispatcherTimer();
        updateCollectionTimer.Interval = TimeSpan.FromMilliseconds(500);
        updateCollectionTimer.Tick += new EventHandler(updateCollectionTimer_Tick);
        updateCollectionTimer.Start();

        voltagePointCollection1 = new VoltagePointCollection();
        var ds1 = new EnumerableDataSource<VoltagePoint>(voltagePointCollection1);
        ds1.SetXMapping(x => x.time);
        ds1.SetYMapping(y => y.Voltage);

        plotter.AddLineGraph(ds1, Colors.Green, 2, "Volts 1");
        MaxVoltage = 1;
        MinVoltage = -1;

        voltagePointCollection2 = new VoltagePointCollection();
        var ds2 = new EnumerableDataSource<VoltagePoint>(voltagePointCollection2);
        ds2.SetXMapping(x => x.time);
        ds2.SetYMapping(y => y.Voltage);

        plotter.AddLineGraph(ds2, Colors.Blue, 2, "Volts 2");
    }

    void updateCollectionTimer_Tick(object sender, EventArgs e)
    {
        if (i < points_x_y_Graph1.Count)
        {
            //{ i = 0; }
            //For first graph
            voltagePointCollection1.Add(new VoltagePoint(points_x_y_Graph1[i], i));
            //For second graph
            voltagePointCollection2.Add(new VoltagePoint(points_x_y_Graph2[i], i)); // To add one more graph
            i++;
        }
    }

    #region INotifyPropertyChanged members
    public event PropertyChangedEventHandler PropertyChanged;
    protected void OnPropertyChanged(string propertyName)
    {
        if (PropertyChanged != null)
            this.PropertyChanged(this, new System.ComponentModel.PropertyChangedEventArgs(propertyName));
    }
    #endregion
}

这篇关于如何使用DynamicDataDisplay在wpf中的一个x-y平面中添加多重图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！