问题
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.
回答1:
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
}
来源：https://stackoverflow.com/questions/40984082/how-to-add-mutiple-graph-in-one-x-y-plane-in-wpf-using-dynamicdatadisplay