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/

高图-在多个地方使用相同的图表

1 个答案: