Установите разные диапазоны в Google Charts - PullRequest
Новая
       13

Установите разные диапазоны в Google Charts

0 голосов
/ 13 сентября 2018

Я использовал Google Developers код, чтобы сделать 4 датчика. Датчик имеет свойство устанавливать максимальное и минимальное значение датчика, например, max: 20 min: 0. Когда я создаю 4 датчика, все они имеют одинаковое максимальное и минимальное значение.

У меня очень простой вопрос, можно ли установить разные максимальные и минимальные значения для каждого датчика?

Вот код, который у меня есть: 

<!DOCTYPE html>                                                          

<html>                                                                   
 <head>                                                                  
  <meta charset="utf-8">                                                 
  <meta name="viewport" content="width=device-width,                     
initial-scale=1">                                                        
  <meta name="viewport" content="width=device-width">                                                                                     
  <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>                 
  <script type="text/javascript">                                        
    google.charts.load('current', {'packages':['gauge']});               
    google.charts.setOnLoadCallback(drawGauge);

    var gauge;
    var gaugedata;                                     
    var gaugeOptions = {min: 0, max: 20, yellowFrom: 200, yellowTo: 250, redFrom: 0, redTo: 4, greenFrom: 4 , greenTo:20 ,                   
minorTicks: 5,animation:{                                                
        duration: 400,                                                   
        startup: true,                                                   
        easing: 'inAndOut',},                                                                 
 }; 

    var gauge_text = 'Gauge';                                                                     
    function drawGauge() {  

      gaugeData = new google.visualization.DataTable();                 
      gaugeData.addColumn('number', '0');                              
      gaugeData.addColumn('number', '1');                              
      gaugeData.addColumn('number', '2');                              
      gaugeData.addColumn('number', '3');                              
      gaugeData.addRows(4);                                              
      gaugeData.setCell(0, 0, 12, gauge_text);                                        
      gaugeData.setCell(0, 1, 18, gauge_text);                                        
      gaugeData.setCell(0, 2, 6, gauge_text);                                        
      gaugeData.setCell(0, 3, 10, gauge_text);                                        

      gauge = new google.visualization.Gauge(document.getElementById('gauge_div'));        
      gauge.draw(gaugeData, gaugeOptions);                               
    }


 </script>                                                              
 </head>                                                                 
 <body>                                                                  
  <div align="center" style="border:2px solid black; width:590px;height: 500px;">                                                         

  <div align="top" id="gauge_div" style="width:590px; height:400px;"></div>                                                                 
 </body>                                                                 
</html>

Я не очень знаком с html, так как этот код является второстепенной частью проекта Python, поэтому любая идея или помощь высоко ценится.

Заранее спасибо;

Андер.

1 Ответ

0 голосов
/ 14 сентября 2018

вам нужно будет нарисовать отдельную диаграмму для каждого набора значений min / max

см. Следующий рабочий фрагмент,
Рисуются четыре диаграммы с разной шкалой, каждая с разным диапазоном ... 

google.charts.load('current', {
  packages: ['gauge']
}).then(function() {
  var gauge;
  var gaugedata;
  var gaugeOptions = {
    min: 0,
    max: 20,
    yellowFrom: 200,
    yellowTo: 250,
    redFrom: 0,
    redTo: 4,
    greenFrom: 4,
    greenTo: 20,
    minorTicks: 5,
    animation: {
      duration: 400,
      startup: true,
      easing: 'inAndOut',
    },
  };

  var gauge_text = 'Gauge';

  gaugeData = new google.visualization.DataTable();
  gaugeData.addColumn('number', '0');
  gaugeData.addColumn('number', '1');
  gaugeData.addColumn('number', '2');
  gaugeData.addColumn('number', '3');
  gaugeData.addRows(1);
  gaugeData.setCell(0, 0, 12, gauge_text);
  gaugeData.setCell(0, 1, 18, gauge_text);
  gaugeData.setCell(0, 2, 6, gauge_text);
  gaugeData.setCell(0, 3, 10, gauge_text);
  
  for (var i = 0; i < gaugeData.getNumberOfColumns(); i++) {
    drawGauge(i);
  }
  
  var gaugeView;
  function drawGauge(index) { 
    gaugeView = new google.visualization.DataView(gaugeData);
    gaugeView.setColumns([index]);
    gauge = new google.visualization.Gauge(document.getElementById('gauge_div_' + index));
    if (index > 0) {
      gaugeOptions.max = gaugeOptions.max + 20;
    }
    gauge.draw(gaugeView, gaugeOptions);
  }  
});
.wrapper {
  white-space: nowrap;
}

.gauge {
  display: inline-block;
  width: 140px;
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div class="wrapper">
  <div class="gauge" id="gauge_div_0"></div>
  <div class="gauge" id="gauge_div_1"></div>
  <div class="gauge" id="gauge_div_2"></div>
  <div class="gauge" id="gauge_div_3"></div>
</div>
...