Wie erstellt man mehrere LineChart in WPF Dynamic Data Display?

Question

Ich habe 3 Sammlung in C# (wpf-Anwendung). Ich muss ihnen ein Liniendiagramm zeigen. Ich recherchierte zu viele Webseiten und ich habe nur dynamische Datenanzeige d3. Also habe ich versucht, ein Diagramm wie unten in WPF zu machen.

i einen Code von Stackoverflow gefunden, aber ich konnte es machen, wie ich dachte. Ich kann nur eine Zeile im Feld anzeigen und es kann nur wie unten angezeigt werden.

und mein weiteres Problem ist, horizontale Achse. Wie kann ich horizontale Werte als String oder als [10-2016] machen? Hier sind Codes, die ich gefunden habe.

MainWindow.xaml

<Window x:Class="WpfApplication1.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:local="clr-namespace:WpfApplication1" 
    xmlns:d3="clr-namespace:Microsoft.Research.DynamicDataDisplay;assembly=DynamicDataDisplay" 
    mc:Ignorable="d" 
    Title="MainWindow" Height="350" Width="525" Loaded="Window_Loaded"> 
    <Grid> 
     <d3:ChartPlotter> 
      <d3:LineGraph DataSource="{Binding Data}"></d3:LineGraph> 
     </d3:ChartPlotter> 
    </Grid> 
</Window> 

MainWindow.xaml.cs

MyViewModel viewModel; 

     public MainWindow() 
     { 
      InitializeComponent(); 

      viewModel = new MyViewModel(); 
      DataContext = viewModel; 
     } 

     private void Window_Loaded(object sender, RoutedEventArgs e) 
     { 
      double[] my_array = new double[10]; 

      for (int i = 0; i < my_array.Length; i++) 
      { 
       my_array[i] = Math.Sin(i)*3; 
       viewModel.Data.Collection.Add(new Point(i, my_array[i])); 
      } 

     } 

MyViewModel.cs

public class MyViewModel 
{ 
    public ObservableDataSource<Point> Data { get; set; } 

    public MyViewModel() 
    { 
     Data = new ObservableDataSource<Point>(); 
    } 
} 

Gibt es eine einfache Möglichkeit, Diagramm als oberes Bild zu machen. Ich weiß nichts über WPF-Charts und ich habe kein Budget, um WPF-Chart-Bibliotheken zu bezahlen. Ich hoffe, dass mir jeder helfen kann.

Answer 1

Ich würde Ihnen empfehlen, Live-Charts zu verwenden.

Jede Zeile in der Grafik wird durch eine 'LineSeries' dargestellt und ist MVVM-freundlich. Es ist 100% kostenlos und Sie können mit NuGet installieren.

Live Charts

How to install

Beispiel:

Xaml:

<Grid> 
    <lvc:CartesianChart Series="{Binding SeriesCollection}" LegendLocation="Right" > 
     <lvc:CartesianChart.AxisY> 
      <lvc:Axis Title="Sales" LabelFormatter="{Binding YFormatter}"></lvc:Axis> 
     </lvc:CartesianChart.AxisY> 
     <lvc:CartesianChart.AxisX> 
      <lvc:Axis Title="Month" Labels="{Binding Labels}"></lvc:Axis> 
     </lvc:CartesianChart.AxisX> 
    </lvc:CartesianChart> 
</Grid> 

Ansichtsmodell:

public class ViewModel 
{ 
    public SeriesCollection SeriesCollection { get; set; } 
    public string[] Labels { get; set; } 
    public Func<double, string> YFormatter { get; set; } 

    public ViewModel() 
    { 
     SeriesCollection = new SeriesCollection 
     { 
      new LineSeries 
      { 
       Title = "Series 1", 
       Values = new ChartValues<double> { 4, 6, 5, 2 ,4 } 
      }, 
      new LineSeries 
      { 
       Title = "Series 2", 
       Values = new ChartValues<double> { 6, 7, 3, 4 ,6 }, 
       PointGeometry = null 
      }, 
      new LineSeries 
      { 
       Title = "Series 3", 
       Values = new ChartValues<double> { 4,2,7,2,7 }, 
       PointGeometry = DefaultGeometries.Square, 
       PointGeometrySize = 15 
      } 
     }; 

     Labels = new[] {"Jan", "Feb", "Mar", "Apr", "May"}; 
     YFormatter = value => value.ToString("C"); 

     //modifying the series collection will animate and update the chart 
     SeriesCollection.Add(new LineSeries 
     { 
      Title = "Series 4", 
      Values = new ChartValues<double> {5, 3, 2, 4}, 
      LineSmoothness = 0, //0: straight lines, 1: really smooth lines 
      PointGeometry = Geometry.Parse("m 25 70.36218 20 -28 -20 22 -8 -6 z"), 
      PointGeometrySize = 50, 
      PointForeround = Brushes.Gray 
     }); 

     //modifying any series values will also animate and update the chart 
     SeriesCollection[3].Values.Add(5d); 
    } 
} 

Ausgabe: