时间戳

首页 > 解决方案 > Highcharts - 在多个地方使用相同的图表

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

问题描述

我有一个网站，必须同时在多个地方使用相同的实心仪表图，但是我希望能够通过简单地调用一行代码来更新它们：

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

所以真的是 1 个实例，但有多个渲染。

谁能帮我？^^

标签： javascriptjqueryhighcharts

解决方案

我创建了一个示例，如何添加具有相同选项和简单更新的多个图表。要添加更多图表，只需添加带有类的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/

推荐阅读