Несколько вариантов для Калибровочных Диаграмм в Google Charts

Question

Я использую диаграммы Google для отображения диаграмм для 3 значений (давление на входе, давление на выходе и разница). Пример

Я использую этот пример jsfiddle, но у меня есть проблема, что все 3 датчика имеют одинаковые параметры и диапазоны, поэтому мне нужно, чтобы у каждого из них были свои параметры (цвета, рейнджеры, ...).

Я прочитал, что я могу сделать это, сделав 3 дел div для каждого датчика), но в моем случае мне нужно, чтобы 3 датчика были в одном делении в качестве примера.

Итак, есть ли способ передать несколько вариантов?

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>