c# - 尝试在我的WPF应用程序(ColumnSeries)中构建一个简单的实时图表

Question

几天来，我一直在尝试将实时图表构建到我的WPF应用程序中。

我想要一个简单的图表。
列系列，应将int值显示为柱线并在时间戳下方。

我使用MVVM构建它，并尝试通过本教程找到解决方案。 https://lvcharts.net/App/examples/v1/wpf/Basic%20Column

我的XAML代码:
<lvc:CartesianChart> <lvc:CartesianChart.Series> <lvc:ColumnSeries Values="{Binding RawDataSeries, UpdateSourceTrigger=PropertyChanged}" /> </lvc:CartesianChart.Series> <lvc:CartesianChart.AxisX > <lvc:Axis Labels="{Binding Labels}"> <lvc:Axis.Separator> <lvc:Separator Step="1"></lvc:Separator> </lvc:Axis.Separator> </lvc:Axis> </lvc:CartesianChart.AxisX> </lvc:CartesianChart>
我在viewmodel中的测试代码:

public void SetChart(int value)
{
var customerVmMapper = Mappers.Weighted<DateTimePoint>().X((x, index) => index).Y(x => x.Value);

Charting.For<DateTimePoint>(customerVmMapper);

            var list = new List<DateTimePoint>()
            {
                new DateTimePoint() {Timestamp = DateTime.Now, Value = value},
                new DateTimePoint() {Timestamp = DateTime.Now, Value = 78},
                new DateTimePoint() {Timestamp = DateTime.Now, Value = 21}
            };

            var values = new ChartValues<DateTimePoint>();
            foreach (var obj in list)
            {
                values.Add(obj);
            }

            RawDataSeries = values;
        }

        public ChartValues<DateTimePoint> RawDataSeries
        {
            get => _rawDataSeries;
            set
            {
                _rawDataSeries = value;
                OnPropertyChanged();
            }
        }

        public class DateTimePoint
        {
            public DateTime Timestamp { get; set; }
            public int Value { get; set; }
        }

有人给我小费吗？

Answer 1

您需要指定数据对象的正确x/y映射，即x轴的间隔
和标签格式器以打印时间戳:

ChartModel.cs

public class ChartModel
{
  public ChartModel()
  {
    CartesianMapper<DateTimePoint> mapper = Mappers.Xy<DateTimePoint>()
      .X((item) => (double) item.Timestamp.Ticks / TimeSpan.FromMinutes(5).Ticks) // Set interval to 5 minutes
      .Y(item => item.Value)
      .Fill((item) => item.Value > 99 ? Brushes.Red : Brushes.Blue);

    var series = new ColumnSeries()
    {
      Title = "Timestamp Values",
      Configuration = mapper,
      Values = new ChartValues<DateTimePoint>
      {
        new DateTimePoint() {Timestamp = DateTime.Now, Value = 100},
        new DateTimePoint() {Timestamp = DateTime.Now.AddMinutes(15), Value = 78},
        new DateTimePoint() {Timestamp = DateTime.Now.AddMinutes(30), Value = 21}
      }
    };
    this.SeriesCollection = new SeriesCollection() { series };
  }

  public SeriesCollection SeriesCollection { get; set; }

  public Func<double, string> LabelFormatter =>
    value => new DateTime((long) value * TimeSpan.FromMinutes(5).Ticks).ToString("t");
}

DateTimePoint.cs

public class DateTimePoint
{
  public DateTime Timestamp { get; set; }
  public int Value { get; set; }
}   

MainWindow.xaml

<CartesianChart Margin="20"
                Height="300"
                Series="{Binding SeriesCollection}"
                LegendLocation="Left">
  <CartesianChart.DataContext>
    <viewModels:ChartModel />
  </CartesianChart.DataContext>

  <CartesianChart.AxisX>
    <Axis Title="Timestamp"
          LabelFormatter="{Binding LabelFormatter}">
    </Axis>
  </CartesianChart.AxisX>
</CartesianChart>

另请阅读Live Charts: Date Time示例。