[英]Multiple options for Gauge Charts in Google Charts
I'm using google charts to render a gauge charts for 3 values (inlet pressure, outlet pressure and difference) Example 我使用谷歌图表呈现为3个值的仪图表(入口压力,出口压力和差) 实施例
I'm using this example jsfiddle
, but I have an issue that all the 3 gauges have the same options and ranges so I need to make each of them has its options (colors, rangers, ...). 我使用的是jsfiddle
示例,但是我有一个问题,所有3个量规都具有相同的选项和范围,因此我需要使它们中的每个都有其选项(颜色,游标,...)。
I read that I can make that by making 3 divs (a div
for each gauge) but in my case I need the 3 gauges to be in one div as the example. 我读到我可以通过设置3个div(每个刻度为一个div
)来做到这一点,但在我的情况下,我需要将3个刻度放在一个div中作为示例。
So, is there a way to pass a multiple options? 那么,有没有办法传递多个选项呢?
it's not possible to pass multiple options... 无法通过多个选项...
but you can use css to align the charts and display the same as one, 但是您可以使用CSS对齐图表并显示与图表相同的内容,
.gauge {
display: inline-block;
}
<div id="chart_div">
<div class="gauge" id="chart_in"></div>
<div class="gauge" id="chart_out"></div>
<div class="gauge" id="chart_diff"></div>
</div>
see following working snippet... 请参阅以下工作片段...
google.charts.load('current', { packages: ['gauge'] }).then(function () { var dataIn = google.visualization.arrayToDataTable([ ['Label', 'Value'], ['Inlet', 80] ]); var dataOut = google.visualization.arrayToDataTable([ ['Label', 'Value'], ['Outlet', 55] ]); var dataDiff = google.visualization.arrayToDataTable([ ['Label', 'Value'], ['Difference', 68] ]); var optionsIn = { width: 133, height: 120, redFrom: 90, redTo: 100, yellowFrom: 75, yellowTo: 90, minorTicks: 5 }; var optionsOut = { width: 134, height: 120, redFrom: 80, redTo: 100, yellowFrom: 65, yellowTo: 80, minorTicks: 5 }; var optionsDiff = { width: 133, height: 120, redFrom: 70, redTo: 100, yellowFrom: 55, yellowTo: 70, minorTicks: 5 }; var chartIn = new google.visualization.Gauge(document.getElementById('chart_in')); var chartOut = new google.visualization.Gauge(document.getElementById('chart_out')); var chartDiff = new google.visualization.Gauge(document.getElementById('chart_diff')); chartIn.draw(dataIn, optionsIn); chartOut.draw(dataOut, optionsOut); chartDiff.draw(dataDiff, optionsDiff); setInterval(function() { dataIn.setValue(0, 1, 40 + Math.round(60 * Math.random())); chartIn.draw(dataIn, optionsIn); }, 13000); setInterval(function() { dataOut.setValue(0, 1, 40 + Math.round(60 * Math.random())); chartOut.draw(dataOut, optionsOut); }, 5000); setInterval(function() { dataDiff.setValue(0, 1, 60 + Math.round(20 * Math.random())); chartDiff.draw(dataDiff, optionsDiff); }, 26000); });
.gauge { display: inline-block; }
<script src="https://www.gstatic.com/charts/loader.js"></script> <div id="chart_div"> <div class="gauge" id="chart_in"></div> <div class="gauge" id="chart_out"></div> <div class="gauge" id="chart_diff"></div> </div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.