为Google图表设置不同的范围

时间:2018-09-13 16:33:47

标签: javascript html charts google-visualization

我已经使用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项目的第二部分,因此对任何想法或帮助都表示赞赏。

预先感谢;

安德。

0 个答案:

没有答案