Charts 在多个图形中保持比例同步或动态更改比例

这里是我的用例：我有两个图表，一个在另一个之上，如图所示。理想情况下，它们应该是一个图表中的两个数据集，但我想不出一种方法可以让一个图表在另一个图表中间开始（特别是在流延迟的情况下）。无论如何，两个数据集的最大和最小刻度都应该相同

我可以在创建时手动为它们指定相同的

标记：{min，max}

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

我已尝试使用较大图表的

chart.scales[“y轴-0”].max

和

min

从

选项：plugins:streaming:onRefresh:

函数中设置父组件的状态，然后尝试在其

onRefresh

函数中从该状态设置其他图表的值。但是第二个图表似乎忽略了更新的值（或者我设置的值实际上并不控制比例）

---

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

让我们假设我们有

chart1

和

chart2

。为了在两个图表中保持比例同步，首先定义

updateScales（）

，如下所示

函数updatecales（）{
var数据集=chart1.data.datasets.concat（chart2.data.datasets）；
chart1.options.scales.yAxes[0]。ticks=chart2.options.scales.yAxes[0]。ticks={
suggestedMin:Math.min（…datasets.map（函数（数据集））{
返回Math.min（…dataset.data.map（函数（值））{
返回值y；
}));
})),
suggestedMax:Math.max（…datasets.map（函数（数据集））{
返回Math.max（…dataset.data.map（函数（值））{
返回值y；
}));
}))
};
图表1.update（）；
图表2.update（）；
}

然后，在两个图表的

onRefresh

末尾调用

updateScales（）

onRefresh:函数（图表）{
//在此更新您的数据集
// ...
updatecales（）；
}

另请参见此示例：