Google 图表中仪表图的多个选项

Question

我正在使用 google 图表呈现 3 个值（入口压力、出口压力和差异）的仪表图 Example

我正在使用这个例子 jsfiddle，但我有一个问题，所有 3 个仪表都有相同的选项和范围，所以我需要让每个仪表都有自己的选项（颜色、护林员、. ..).

我读到我可以通过制作 3 divs（每个仪表一个 div）来实现，但在我的情况下，我需要将 3 个仪表放在一个 div 中举个例子。

那么，有没有办法传递多个选项？

Answer 1

无法传递多个选项...

但您可以使用 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>

请参阅以下工作片段...

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>

Google 图表中仪表图的多个选项

Multiple options for Gauge Charts in Google Charts

javascript

google-visualization

google-gauges