您可以使用 LiveCharts 显示具有 x 和 y 值对的线系列吗？答案

【问题标题】：Can you display a line series with x and y value pairs using LiveCharts?您可以使用 LiveCharts 显示具有 x 和 y 值对的线系列吗？
【发布时间】：2020-09-05 23:28:22
【问题描述】：

我试图通过提供由笛卡尔图表显示的 x 和 y 值对来显示折线图。 LiveCharts 可以吗？我在网上找不到这个例子。

我知道，您可以提供 x 轴的标签，但我在 x 轴上的值不是线性的，因此它们应该有不同的间距。

到目前为止，这是我的 Xaml：

<liveCharts:CartesianChart Grid.Column="0"
                           Margin="5 0 5 0"
                           Series="{Binding TemperatureSeries}">
    <liveCharts:CartesianChart.AxisX>
        <liveCharts:Axis Title="Zeit"
                         FontSize="15"
                         FontWeight="Bold"
                         Labels="{Binding Labels}" />
    </liveCharts:CartesianChart.AxisX>

    <liveCharts:CartesianChart.AxisY>
        <liveCharts:Axis Title="Temperature (°C)"
                         FontSize="15"
                         FontWeight="Bold"
                         LabelFormatter="{Binding DoubleToStingConverter}" />
    </liveCharts:CartesianChart.AxisY>
</liveCharts:CartesianChart>

这就是 TemperatureSeries 属性的样子。

this.TemperatureSeries =
    new SeriesCollection
    {
        new LineSeries
        {
            Values = new ChartValues<double>(),
            Stroke = redStroke,
            Fill = redFill
        }
    };

【问题讨论】：

标签： wpf livecharts

【解决方案1】：

您需要使用Mapper，例如CartesianMapper<T>。 Mapper 将任意对象的数据映射到图表的轴（例如，在 CartesianMapper 的情况下为 x 和 y）。
Mapper 还允许定义有关数据值表示的约束。例如，您可以定义超过某个阈值的值应涂成红色。
然后将此数据映射器分配给LineSeries.Configuration 属性。

请注意，ChartValues 是一种通用类型，允许将任何数据模型定义为图表值。 Mapper 知道如何从该模型类型中获取值。以下示例使用简单的Point 结构作为数据模型：

private void InitializeData()
{
  var values = new ChartValues<Point>();

  // Create sine graph
  for (double x = 0; x < 361; x++)
  {
    var point = new Point() {X = x, Y = Math.Sin(x * Math.PI / 180)};
    values.Add(point);
  }

  this.TemperatureSeries = new SeriesCollection
  {
    new LineSeries
    {
      Configuration = new CartesianMapper<Point>()
        .X(point => point.X) // Define a function that returns a value that should map to the x-axis
        .Y(point => point.Y) // Define a function that returns a value that should map to the y-axis
        .Stroke(point => point.Y > 0.3 ? Brushes.Red : Brushes.LightGreen) // Define a function that returns a Brush based on the current data item
        .Fill(point => point.Y > 0.3 ? Brushes.Red : Brushes.LightGreen),
      Title = "Series",
      Values = values,
      PointGeometry = null
    }
  };
}

【讨论】：