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

时间:2018-11-15 07:07:15

标签: javascript jquery highcharts

我有一个网站,必须在多个地方同时使用同一实体尺寸图,但是我希望能够通过简单地调用一行代码来更新它们:

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

实际上是1个实例,但是有多个渲染。

谁可以帮助我? ^^

1 个答案:

答案 0 :(得分:0)

我创建了一个示例,说明如何使用相同的选项添加多个图表并进行简单的更新。要添加更多图表,只需在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/