我正在尝试在一个页面上插入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);
});
...
1条答案
按热度按时间iszxjhcz1#
您只需要以不同的方式定义您的div,它就可以正常工作:
http://jsfiddle.net/Lgahj01z/