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();
}

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

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

另请参见以下示例：https://jsfiddle.net/nagix/se2ank5z/

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

1 个答案: