具有流插件的Chartjs：更新y-range

Question

我将Chartjs工具与streaming plugin一起使用。

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

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

我的问题是，ChartJS在数据集中渲染了相对于整个数据的图，但是我想让y轴的最小值为min（可见数据）而不是min（所有数据）（并且y轴最大值也是如此）。

我知道我可以减小流插件的TTL值，但是我想保留所有数据（我也将Charting插件用于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);
}