javascript - 具有不同选项集的多个 Google 仪表

Question

我正在尝试在页面上插入多个 Google 仪表(或 Highchart 仪表)实例。
我想使用不同的选项集并将它们分开。所以我不能使用这里介绍的解决方案，我认为: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/