charts - 在多个图形中保持比例同步或动态改变比例

Question

这是我的用例:我有两个图表，一个在另一个之上，如图所示 here .理想情况下，它们是一个图表中的两个数据集，但我想不出一种方法可以从一个图表中途开始另一个图表(尤其是在流式传输延迟的情况下)。无论如何，两个数据集应该具有相同的比例最大值和最小值。

我可以在创建时手动给它们相同的 ticks: { min, max}，但我的数据集中的值范围太大，无法在开始时设置一次并保留它们。所以，我必须让 Chart.js 根据当前图表中的数据为我计算出比例。但由于两条线的数据略有不同，因此生成的比例略有不同，您可以在上面的 gif 中看到它们在不同时间重新缩放。

我尝试使用 chart.scales["y-axis-0"].max 和 min 中的较大图表设置父组件的状态 options: plugins: streaming: onRefresh: 函数，然后尝试根据其 onRefresh 中的该状态设置其他图表的值。但是第二个图表似乎忽略了更新的值(或者我设置的值实际上并没有控制比例)。

那么，在多个图表中保持比例同步的最佳方法是什么？

Answer 1

假设我们有 chart1 和 chart2。为了使两个图表的比例保持同步，首先定义 updateScales() 如下。

function updateScales() {
    var datasets = chart1.data.datasets.concat(chart2.data.datasets);
    chart1.options.scales.yAxes[0].ticks = chart2.options.scales.yAxes[0].ticks = {
        suggestedMin: Math.min(...datasets.map(function(dataset) {
            return Math.min(...dataset.data.map(function(value) {
                return value.y;
            }));
        })),
        suggestedMax: Math.max(...datasets.map(function(dataset) {
            return Math.max(...dataset.data.map(function(value) {
                return value.y;
            }));
        }))
    };
    chart1.update();
    chart2.update();
}

然后，在两个图表的 onRefresh 末尾调用 updateScales()。

onRefresh: function(chart) {
    // Update your datasets here
    // ...
    updateScales();
}

另请参阅此示例:https://jsfiddle.net/nagix/se2ank5z/