带有流式插件的 Chartjs：更新 y 范围

Question

我的流包含 x 的时间数据和 y 的浮点值。

y数据随时间变化很大，有时~10^-3，有时10^-9。

我的问题是，ChartJS 会根据数据集中的全部数据绘制图表，但我希望 y 轴的最小值是最小值（可见数据）而不是最小值（所有数据）（对于 y 轴最大值也是如此）。

我知道我可以降低流式插件的 TTL 值，但我想保留所有数据（我也使用 ChartJS 的缩放插件）。

Answer 1

您可以仅使用可见数据手动设置 ticks.min 和 ticks.max，如下所示：

onRefresh(chart) {
    var yMin = 0;
    var yMax = 1;
    var xMax = Date.now() - chart.options.plugins.streaming.delay;
    var xMin = xMax - chart.options.plugins.streaming.duration;

    // Your data refresh code
    ...

    // Calculate yMin and yMax based on visible data only
    chart.data.datasets.forEach(function(dataset) {
        dataset.data.forEach(function(point) {
            if (point.x >= xMin && point.x <= xMax) {
                yMin = Math.min(point.y, yMin);
                yMax = Math.max(point.y, yMax);
            }
        });
    });
    chart.config.options.scales.yAxes[0].ticks.min =
        Chart.helpers.niceNum(yMin);
    chart.config.options.scales.yAxes[0].ticks.max =
        Chart.helpers.niceNum(yMax);
}

带有流式插件的 Chartjs：更新 y 范围

Chartjs with streaming plugin: update y-range

range

streaming

chart.js