2016-01-14 117 views
1

我試圖創建一個基本的Google Charts line chart來顯示3個值隨時間變化的百分比。圖表正在顯示,但我努力讓vAxis顯示0 - 100%,最高值僅僅是我數據集中最高的值(45%)。谷歌圖表折線圖不顯示0-100作爲百分比尺度

這是我使用的代碼:

<html> 
<head> 
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> 
    <script type="text/javascript"> 
     google.charts.load('current', {'packages':['line']}); 
     google.charts.setOnLoadCallback(drawChart); 

     function drawChart() { 

      var data = new google.visualization.DataTable(); 
      data.addColumn('date', 'date'); 
      data.addColumn('number', 'tool1'); 
      data.addColumn('number', 'tool2'); 
      data.addColumn('number', 'tool3'); 

      data.addRows([ 
      [new Date(2000, 8, 5), 10, 20, 30], 
      [new Date(2001, 8, 5), 20, 30, 40], 
      [new Date(2002, 8, 5), 25, 35, 45], 
      ]); 

      var options = { 
      chart: { 
       title: 'Tool rollout' 
      }, 
      vAxis: {minValue: 0, 
        maxValue: 100, 
        format: "percent" 
        }, 
      width: 900, 
      height: 500, 
      }; 

      var chart = new google.charts.Line(document.getElementById('line')); 
      chart.draw(data, options); 
    } 
    </script> 
</head> 
<body> 
    <div id="line"></div> 
</body> 
</html> 

但是,這是它是如何渲染:

enter image description here

該文檔顯示,設置vAxis.maxValue「移動的最大值垂直軸到指定值;在大多數圖表中這將是向上的,如果設置爲小於數據的最大y值,則忽略。但我顯然錯過了一些東西,因爲這似乎沒有被使用。

使用材料圖表谷歌API

回答

0

You're,請嘗試使用:

vAxis: { 
     format: "#.#%", 
     viewWindow: { 
      max:1.0, 
      min:0.2 
     } 
}