Question

我试图在页面上插入多个Google Gauges（或Highchart Gauges）实例。
我想使用不同的选项集并将它们分开。所以我不能使用这里提出的解决方案，我认为：Google Charts multiple gauges

我在这里尝试了一次：http://jsfiddle.net/tcmsu475/1/

我错过了一些基本的东西。与Highchart图表相同。我似乎无法在1 div中绘制1个图表，然后在另一个div中绘制另一个图表。

代码（供将来参考）：

...
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="https://www.google.com/jsapi?autoload={'modules':[{'name':'visualization','version':'1','packages':['gauge']}]}"></script>
<div id="chart1_div" />
<div id="chart2_div" />
...

$(function () {

    var chart1_data = google.visualization.arrayToDataTable([
        ['Label', 'Value'],
        ['Band1', 100], ]);

    var options1 = {
        width: 500,
        height: 120,
        redFrom: 75,
        redTo: 100,
        yellowFrom: 25,
        yellowTo: 75,
        greenFrom: 0,
        greenTo: 25,
        minorTicks: 5,
        greenColor: '#CCFFCC',
        yellowColor: '#FFFFCC',
        redColor: '#F78181'
    };

    var chart1 = new google.visualization.Gauge(document.getElementById('chart1_div'));

    chart1.draw(chart1_data, options1);

    /* ========================================================= */

    var chart2_data = google.visualization.arrayToDataTable([
        ['Label', 'Value'],
        ['Band2', 50], ]);

    var options2 = {
        width: 500,
        height: 120,
        redFrom: 90,
        redTo: 100,
        yellowFrom: 50,
        yellowTo: 90,
        greenFrom: 0,
        greenTo: 50,
        minorTicks: 5,
        greenColor: '#CCFFCC',
        yellowColor: '#FFFFCC',
        redColor: '#F78181'
    };

    var chart2 = new google.visualization.Gauge(document.getElementById('chart2_div'));

    chart2.draw(chart2_data, options2);

});
...

Answer 1

你只需要以不同的方式定义你的div，它就可以了：

<div id="chart1_div"></div>
<div id="chart2_div"></div>

http://jsfiddle.net/Lgahj01z/

多个Google Gauges具有不同的选项集

1 个答案: