Chart.js Как синхронизировать панорамирование и масштабирование в нескольких чатах

Question

Я хочу синхронизировать панорамирование и масштабирование на нескольких графиках. Я использую Chart.js с chartjs-plugin-zoom.

charjs-plugin-zoom вызывает событие с помощью функции обратного вызова onZoom. Таким образом, значения на обоих концах оси X получаются с помощью функции обратного вызова.

onZoom: function () {
    var minVal = myChartA.getDatasetMeta(0).dataset._scale.chart.scales['x-axis-0']._table[0].time;
    var maxVal = myChartA.getDatasetMeta(0).dataset._scale.chart.scales['x-axis-0']._table[1].time;

    leftEnd = minVal;
    rightEnd = maxVal;

    updateChart();
}

Затем обновите диаграмму с помощью функции updateChart.

Я думал, чтодругие диаграммы должны быть обновлены значениями обоих концов оси X, полученными функцией updateChart. Вызовите update () с Chart.helpers.each, чтобы обновить все графики.

function updateChart() {
    Chart.helpers.each(Chart.instances, function (instance) {
        instance.oprions = {
            scales: [{
                xAxes: {
                    time: {
                        min: leftEnd,
                        max: rightEnd
                    }
                }
            }]
        };
        instance.update();
    });
}

Однако ожидаемый результат не был получен. Zoom-PAN отображает только тот график, который был использован.

Я думаю, что функция обратного вызова onZoom получает как край оси X, так и обновляет график каждый кадр. Графики могут быть обновлены только с помощью параметров, поэтому Chart.helpers.each можно использовать для обновления всех графиков одновременно. Если оба конца обновляемой оси X являются глобальными переменными, можно ссылаться на все графики.

Этот метод неверен? Неправильный ли метод обновления опции? Не правильно ли установлено время обновления?

---

ОБНОВЛЕНИЕ

Я узнал, как обновить диаграмму, обратившись к https://www.chartjs.org/docs/latest/developers/updates.html.

На самом деле,Шкала оси X ярость нескольких графиков изменилась, но максимальное масштабирование и перестал работать снова.

Причина не в том, чтобы обновить ссылку. Что такое ? Пример кода пишется как «необходимо обновить ссылку» в качестве комментария. Что значит?

Пример кода ниже:

xScale = chart.scales['newId'];

"newId" переназначается как идентификатор весов.

Но у меня есть минимальное и максимальное значение масштаба. Как ??

JSFillde

Answer 1

Я понял, как это сделать. Это не страшно, если я знаю.

Функция обратного вызова updateChart () должна выглядеть следующим образом:

        function updateChart() {
            Chart.helpers.each(Chart.instances, function (instance) {
                instance.options.scales.xAxes[0].time.min = leftEnd;
                instance.options.scales.xAxes[0].time.max = rightEnd;              
                instance.update();
            });
        }

Дело в том, что мои данные - это данные временного ряда, поэтому следует использовать параметр масштабирования"время".

JSFillde обновлено.