你能用LiveCharts显示一个x和y值对的线序列吗

Question

我试图通过提供由笛卡尔图显示的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
}
};

Answer 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
}
};
}