highcharts 具有不同选项集的多个Google Jmeter

p8ekf7hl  于 2022-11-10  发布在  Highcharts
关注(0)|答案(1)|浏览(159)

我正在尝试在一个页面上插入Google Gauges(或Highchart Gauges)的多个示例。
我想使用不同的选项集并将它们分开放置。因此我不能使用这里提供的解决方案,我认为:Google Charts multiple gauges
我在这里做了一个尝试:http://jsfiddle.net/tcmsu475/1/
我遗漏了一些基本的东西。这与 highcharts 一样。我似乎不能在一个div中绘制一个图表,然后在另一个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);

});
...
iszxjhcz

iszxjhcz1#

您只需要以不同的方式定义您的div,它就可以正常工作:

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

http://jsfiddle.net/Lgahj01z/

相关问题