Highcharts - использовать один и тот же график в нескольких местах

Question

У меня есть веб-сайт, где один и тот же сплошной граф должен быть использован в нескольких местах одновременно, однако я бы хотел обновить их все, просто вызвав одну строку кода:

section1_graph.series[0].setData([32], true);

Так что на самом деле 1 экземпляр, но несколько рендеров.

Кто может мне помочь?^^

Answer 1

Я создал пример, как добавить несколько графиков с одинаковыми параметрами и простым обновлением. Чтобы добавить больше диаграмм, просто добавьте элемент div с классом gaugeContainer.

var options = {
    series: [{
        type: 'gauge'
    }],
    pane: {
        startAngle: -150,
        endAngle: 150
    },
    yAxis: {
        min: 0,
        max: 200
    }
}

var containers = document.getElementsByClassName('gaugeContainer');

for (var i = 0; i < containers.length; i++) {
    Highcharts.chart(containers[i], options);
}

function setChartsData(data) {
    Highcharts.charts.forEach(function(chart) {
        if (chart && chart.renderTo.classList.contains("gaugeContainer")) {
            chart.series[0].setData(data.slice());
        }
    });
}

setChartsData([32]);

setTimeout(function() {
    setChartsData([120]);
}, 1500);

Демонстрационная версия: http://jsfiddle.net/BlackLabel/6qxtd20g/