javascript - 谷歌图表中仪表图表的多个选项

Question

我正在使用谷歌图表来呈现 3 个值（入口压力、出口压力和差值）的仪表图示例

我正在使用这个示例jsfiddle，但我有一个问题，即所有 3 个仪表都具有相同的选项和范围，因此我需要让它们中的每一个都有其选项（颜色、护林员......）。

我读到我可以通过制作 3 个 div（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>