2

这是我的用例：我有两个图表，一个在另一个之上，如此处所示。理想情况下，它们将是单个图表中的两个数据集，但我想不出一种方法可以在另一个图表中途启动一个图表（尤其是在流延迟的情况下）。无论如何，两个数据集都应该具有相同的最大和最小比例。

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

我尝试使用较大的图表chart.scales["y-axis-0"].max和min从options: plugins: streaming: onRefresh:函数内部设置父组件的状态，然后尝试在其onRefresh. 但是第二张图表似乎忽略了更新的值（或者我设置的值实际上并不控制比例）。

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

4

1 回答 1

3

假设我们有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();
}

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

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

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

于 2018-07-23T18:55:15.813 回答