该库的实施相当糟糕。有一个付费版本,其宣传自己比免费版本性能更高。我没有测试过付费版本。免费版本的图表控件非常慢,尤其是在处理巨大的数据集时。
显然,默认CartesianChart.AnimationSpeed
默认设置为 500ms。在实时场景中将绘图速率提高到 1/450 毫秒以上将导致“丢失”帧。 “丢失”意味着数据最终可见,但不是实时绘制的。每个布局失效的渲染过程花费的时间太长。
超过 450 毫秒将使绘图显得滞后(由于跳帧)。这是执行不力的结果。当超过 500 毫秒的默认动画速度时,应禁用动画。
无论如何,您可以采取一些措施来提高整体性能,以便显着超过 450 毫秒:
- Use
ObservablePoint
or ObservableValue
或者通常让你的数据类型实现INotifyPropertyChanged
。修改固定/不可变的数据项集而不是修改源集合(例如通过添加/删除项)时,您可能会获得更好的结果。
- 通过设置删除图形的实际视觉点元素
LineSeries.PointGeometry
to null
。这将删除额外的渲染元素。线条本身将保持可见。这会显著地提高性能。
- Set
Chart.Hoverable
to false
禁用鼠标悬停效果。
- Set
Chart.DataTooltip
to {x:Null}
禁用工具提示对象的创建。
- Set
Chart.DisableAnimations
to true
。禁用动画将显著地提高渲染性能。或者通过设置禁用每个轴的选择性动画Axis.DisableAnimations
.
- Set
Axis.MinValue
and Axis.MaxValue
禁用每次值更改时的自动缩放。在大多数 X 轴值发生变化的情况下,您也必须实时调整这两个属性。
- Set
Axis.Unit
还显着改善了重新渲染的外观。
- Set
UIElement.CacheMode
在图表对象上。用一个BitmapCache
允许禁用像素捕捉并修改渲染缩放。 ABitmapCache.RenderAtScale
值低于1
增加了模糊度,但也提高了渲染性能UIElement
.
以下示例通过移动每个点来实时绘制正弦图ObservablePoint
左边一组固定的 360 个值的值。应用所有建议的性能调整,从而在 1/10ms (100Hz) 的绘图速率下获得可接受的平滑度。您可以使用 1/50ms 到 1/200ms 之间的值,甚至可以低于 1/10ms(如果这仍然可以接受)。
请注意,默认的 Windows 计时器以 15.6 毫秒的分辨率运行。这意味着
强烈建议调整采样率以匹配绘图速率,以避免出现滞后感。或者实现生产者-消费者模式以避免丢失/跳过数据读取。
数据模型.cs
public class DataModel : INotifyPropertyChanged
{
public DataModel()
{
this.ChartValues = new ChartValues<ObservablePoint>();
this.XMax = 360;
this.XMin = 0;
// Initialize the sine graph
for (double x = this.XMin; x <= this.XMax; x++)
{
var point = new ObservablePoint()
{
X = x,
Y = Math.Sin(x * Math.PI / 180)
};
this.ChartValues.Add(point);
}
// Setup the data mapper
this.DataMapper = new CartesianMapper<ObservablePoint>()
.X(point => point.X)
.Y(point => point.Y)
.Stroke(point => point.Y > 0.3 ? Brushes.Red : Brushes.LightGreen)
.Fill(point => point.Y > 0.3 ? Brushes.Red : Brushes.LightGreen);
// Setup the IProgress<T> instance in order to update the chart (UI thread)
// from the background thread
var progressReporter = new Progress<double>(newValue => ShiftValuesToTheLeft(newValue, CancellationToken.None));
// Generate the new data points on a background thread
// and use the IProgress<T> instance to update the chart on the UI thread
Task.Run(async () => await StartSineGenerator(progressReporter, CancellationToken.None));
}
// Dynamically add new data
private void ShiftValuesToTheLeft(double newValue, CancellationToken cancellationToken)
{
// Shift item data (and not the items) to the left
for (var index = 0; index < this.ChartValues.Count - 1; index++)
{
cancellationToken.ThrowIfCancellationRequested();
ObservablePoint currentPoint = this.ChartValues[index];
ObservablePoint nextPoint = this.ChartValues[index + 1];
currentPoint.X = nextPoint.X;
currentPoint.Y = nextPoint.Y;
}
// Add the new reading
ObservablePoint newPoint = this.ChartValues[this.ChartValues.Count - 1];
newPoint.X = newValue;
newPoint.Y = Math.Sin(newValue * Math.PI / 180);
// Update axis min/max
this.XMax = newValue;
this.XMin = this.ChartValues[0].X;
}
private async Task StartSineGenerator(IProgress<double> progressReporter, CancellationToken cancellationToken)
{
while (true)
{
// Add the new reading by posting the callback to the UI thread
ObservablePoint newPoint = this.ChartValues[this.ChartValues.Count - 1];
double newXValue = newPoint.X + 1;
progressReporter.Report(newXValue);
// Check if CancellationToken.Cancel() was called
cancellationToken.ThrowIfCancellationRequested();
// Plot at 1/10ms
await Task.Delay(TimeSpan.FromMilliseconds(10), cancellationToken);
}
}
private double xMax;
public double XMax
{
get => this.xMax;
set
{
this.xMax = value;
OnPropertyChanged();
}
}
private double xMin;
public double XMin
{
get => this.xMin;
set
{
this.xMin = value;
OnPropertyChanged();
}
}
private object dataMapper;
public object DataMapper
{
get => this.dataMapper;
set
{
this.dataMapper = value;
OnPropertyChanged();
}
}
public ChartValues<ObservablePoint> ChartValues { get; set; }
public Func<double, string> LabelFormatter => value => value.ToString("F");
public event PropertyChangedEventHandler PropertyChanged;
protected virtual void OnPropertyChanged([CallerMemberName] string propertyName = null) => this.PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
}
主窗口.xaml
<Window>
<Window.DataContext>
<DataModel />
</Window.DataContext>
<CartesianChart Height="500"
Zoom="None"
Hoverable="False"
DataTooltip="{x:Null}"
DisableAnimations="True">
<wpf:CartesianChart.Series>
<wpf:LineSeries PointGeometry="{x:Null}"
Title="Sine Graph"
Values="{Binding ChartValues}"
Configuration="{Binding DataMapper}"/>
</wpf:CartesianChart.Series>
<CartesianChart.CacheMode>
<BitmapCache EnableClearType="False"
RenderAtScale="1"
SnapsToDevicePixels="False" />
</CartesianChart.CacheMode>
<CartesianChart.AxisY>
<Axis Title="Sin(X)"
FontSize="14"
Unit="1"
MaxValue="1.1"
MinValue="-1.1"
DisableAnimations="True"
LabelFormatter="{Binding LabelFormatter}"
Foreground="PaleVioletRed" />
</CartesianChart.AxisY>
<CartesianChart.AxisX>
<Axis Title="X"
DisableAnimations="True"
FontSize="14"
Unit="1"
MaxValue="{Binding XMax}"
MinValue="{Binding XMin}"
Foreground="PaleVioletRed" />
</CartesianChart.AxisX>
</CartesianChart>
</Window>