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>
但是,這是它是如何渲染:
該文檔顯示,設置vAxis.maxValue「移動的最大值垂直軸到指定值;在大多數圖表中這將是向上的,如果設置爲小於數據的最大y值,則忽略。但我顯然錯過了一些東西,因爲這似乎沒有被使用。
使用材料圖表谷歌API