Блог

Я пытаюсь изучить и внедрить LiveChart в приложении WPF на основе шаблона MVVM, но мне трудно понять, как его правильно реализовать. Допустим, у меня есть пользовательский класс, подобный этому. Я знаю, что вопрос немного запутанный, но мне трудно понять, как это работает, может кто-нибудь, пожалуйста, помочь мне, приведя простой пример того, как построить пользовательский класс на основе шаблона MVVM?

КЛАСС ErrorPrt

 public class ErrorPrt
{
    public ErrorPrt()
    {
        prtName = string.Empty;
        Count = -1;
    }
    public string prtName { get; set; }
    public int Count { get; set; }
}
  

ОБЪЯВЛЕНИЕ

 private string[] Labels { get; set; }

public SeriesCollection seriesCollection;
private SeriesCollection SeriesCollection
{
    get { return seriesCollection; }
    set { seriesCollection = value; OnPropertyChanged("SeriesCollection"); }
}
  

МЕТОД ОТОБРАЖЕНИЯ ДИАГРАММЫ

 public SeriesCollection dispalyChart(ErrorPrt[] err)
{
    SeriesCollection series = new SeriesCollection();

    List<int> vs1 = new List<int>();

    foreach (ErrorPrt e in err)
    {
        vs1.Add(e.Count);
    }

    series.Add(new ColumnSeries
    {
        Title = "REPORT",
        Values = new ChartValues<ErrorPrt> (err)
    });
    return series;
}

public string[] GetLabels(ErrorPrt[] err)
{
    string[] Labels = new string[err.Length];
    int j = 0;
    foreach(var e in err)
    {
        Labels[j] = e.prtName;
        j  ;
    }
    return Labels;
}
  

Редактировать

ЗНАЧЕНИЯ диаграммы ОБЪЯВЛЕНЫ КАК ГЛОБАЛЬНЫЕ ДЛЯ VIEWMODEL

 class BackupStatsViewModel : INotifyPropertyChanged
{
    //OMITTED CODE
    ChartValues<DataModel> values = new ChartValues<DataModel>();

        private void InitializeBarChartData(ErrorPrt[] arr)
        {


            for (int i = 0; i < arr.Count(); i  )
                values.Add(new DataModel() { Label = $"PRT {arr[i].prtName}", Value = arr[i].Count });
            // Initialize the DataModel items

            //for (double value = 0; value < 10; value  )
            //{
            //    values.Add(new DataModel() { Label = $"Column {value   1}", Value = value   10 });
            //}

            // Create a labels collection from the DataModel items
            this.ColumnLabels = new ObservableCollection<string>(values.Select(dataModel => dataModel.Label));
            var dataMapper = new CartesianMapper<DataModel>()
              .Y(dataModel => dataModel.Value)
              .Fill(dataModel => dataModel.Value > 15.0 ? Brushes.Red : Brushes.Green);

            this.ChartDataSets = new SeriesCollection
            {
              new ColumnSeries
              {
                Values = values,
                Configuration = dataMapper
              }
            };
        }
    }
}
  

Но в метке отображается «серия», а количество не метка..

Следующий пример представляет собой минимальный пример MVVM, который отображает ColumnSeries (гистограмму) на основе пользовательской модели данных:

DataModel.cs

 class DataModel : INotifyPropertyChanged
{
  private double value;   
  public double Value
  {
    get => this.value;
    set 
    { 
      this.value = value; 
      OnPropertyChanged();
    }
  }

  private string label;   
  public string Label
  {
    get => this.label;
    set 
    { 
      this.label = value; 
      OnPropertyChanged();
    }
  }

  public event PropertyChangedEventHandler PropertyChanged;
  protected virtual void OnPropertyChanged([CallerMemberName] string propertyName = null)
  {
    this.PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
  }
}
  

ViewModel.cs

 class ViewModel : INotifyPropertyChanged
{
  public SeriesCollection ChartDataSets { get; set; }
  public ObservableCollection<string> ColumnLabels { get; set; }

  public ViewModel()
  {
    InitializeBarChartData();
  }

  private void InitializeBarChartData()
  {
    // Initialize the DataModel items
    var values = new ChartValues<DataModel>();
    for (double value = 0; value < 10; value  )
    {
      values.Add(new DataModel() {Label = $"Column {value   1}", Value = value   10});
    }

    // Create a labels collection from the DataModel items
    this.ColumnLabels = new ObservableCollection<string>(values.Select(dataModel => dataModel.Label));

    // Define a data mapper, which tells the Chart how to extract data from the model
    // and how to map it to the corresponding axis. The mapper also allows 
    // to define a predicate which will be applied to color each data item (Fill, Stroke)
    var dataMapper = new CartesianMapper<DataModel>()
      .Y(dataModel => dataModel.Value)
      .Fill(dataModel => dataModel.Value > 15.0 ? Brushes.Red : Brushes.Green);

    this.ChartDataSets = new SeriesCollection
    {
      new ColumnSeries
      {
        Values = values,
        Configuration = dataMapper
      }
    };
  }

  public event PropertyChangedEventHandler PropertyChanged;
  protected virtual void OnPropertyChanged([CallerMemberName] string propertyName = null)
  {
    this.PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
  }
}
  

MainWindow.xaml

 <Window>
  <Window.DataContext>
    <ViewModel />
  </Window.DataContext>

  <CartesianChart Series="{Binding ChartDataSets}">
    <CartesianChart.AxisX>
      <Axis Labels="{Binding ColumnLabels}" />
    </CartesianChart.AxisX>
  </CartesianChart>
</Window>