问题描述
我试图通过提供由直角图显示的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
}
};
解决方法
您需要使用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
}
};
}