使用 LightningChart JS 在缩放后释放 X 轴并优化数据清理

本文介绍了在使用 LightningChart JS 创建图表时，如何在调用 chart.zoom() 后释放 X 轴，使其恢复自动滚动，并深入探讨了数据清理策略，以确保图表始终保持所需的最小数据点数量，同时清理不再需要渲染的旧数据。

在使用 LightningChart JS 创建图表时，经常需要在初始加载时进行缩放，以便更好地展示数据。然而，调用 chart.zoom() 方法后，X 轴的自动滚动功能可能会失效。此外，有效地管理大量数据，并进行数据清理，对于保持图表的性能至关重要。本文将详细介绍如何在缩放后释放 X 轴，以及如何使用数据清理策略来优化图表的数据处理。

释放 X 轴，恢复自动滚动

当使用 chart.zoom() 方法对图表进行缩放后，X 轴的自动滚动功能可能会停止工作。这通常发生在设置了 AxisScrollStrategies.progressive 滚动策略的情况下。要恢复 X 轴的自动滚动，可以手动设置 X 轴的 interval。

LightningChart JS 提供了 Axis.setInterval() 方法，允许你手动设置轴的起始和结束位置，并控制滚动行为。

// 获取 X 轴对象
const xAxis = chart.getDefaultAxisX();

// 设置 X 轴的 interval，恢复自动滚动
xAxis.setInterval(0, 100);

setInterval() 方法接受以下参数：

• start: 轴的起始值。
• end: 轴的结束值。
• animate: (可选) 是否启用动画效果，可以设置为布尔值或动画持续时间（毫秒）。
• disableScrolling: (可选) 如果设置为 true，则禁用设置 interval 后的自动滚动。

通过调整 start 和 end 的值，可以控制 X 轴的显示范围。如果不希望在设置 interval 后自动滚动，可以将 disableScrolling 设置为 true。

示例：

// 获取 X 轴对象
const xAxis = chart.getDefaultAxisX();

// 设置 X 轴的 interval，禁用自动滚动
xAxis.setInterval(0, 100, undefined, true);

// 设置 X 轴的 interval，启用动画效果
xAxis.setInterval(0, 100, 500); // 动画持续时间为 500 毫秒

数据清理策略

LightningChart JS 提供了数据清理功能，允许你控制图表中数据点的数量，并清理不再需要渲染的旧数据。series.setDataCleaning() 方法用于配置数据清理策略。

然而，需要注意的是，series.setDataCleaning({ minDataPointCount: 1000 }) 并不意味着只保留最新的 1000 个数据点。minDataPointCount 只是一个触发数据清理的阈值。当数据点的数量超过这个阈值时，才会触发清理操作。

智谱AI开放平台

智谱AI大模型开放平台-新一代国产自主通用AI开放平台

38

查看详情

要实现始终保持至少 120,000 个数据点，并清理旧数据，你需要根据你的数据更新频率和图表的显示需求来调整数据清理策略。

以下是一些建议：

1. 设置 minDataPointCount 为 120,000： 确保图表中始终至少有 120,000 个数据点。

2. 调整 maxDataPointCount： 设置一个 maxDataPointCount，当数据点数量超过这个值时，触发清理操作。maxDataPointCount 的值应该大于 minDataPointCount，例如可以设置为 150,000。

3. 使用 strategy： 选择合适的数据清理策略。常用的策略包括：

   • progressive: 保留最新的数据点，删除最旧的数据点。
   • rolling: 类似于 progressive，但会平滑地滚动数据。

示例：

// 获取 series 对象
const series = chart.addLineSeries();

// 配置数据清理策略
series.setDataCleaning({
    minDataPointCount: 120000,
    maxDataPointCount: 150000,
    strategy: 'progressive'
});

注意事项：

• 数据清理是一个耗时的操作，频繁的数据清理可能会影响图表的性能。
• 根据你的数据更新频率和图表的显示需求，合理调整 minDataPointCount、maxDataPointCount 和 strategy，以获得最佳的性能和用户体验。

总结

本文介绍了在使用 LightningChart JS 创建图表时，如何释放 X 轴的自动滚动功能，以及如何使用数据清理策略来优化图表的数据处理。通过手动设置 X 轴的 interval，可以恢复自动滚动。通过配置 series.setDataCleaning() 方法，可以控制图表中数据点的数量，并清理不再需要渲染的旧数据。合理地使用这些方法，可以创建高性能、用户体验良好的图表。

以上就是使用 LightningChart JS 在缩放后释放 X 轴并优化数据清理的详细内容，更多请关注php中文网其它相关文章！