Google Charts 折线图未显示 0-100 作为百分比刻度
Posted
技术标签:
【中文标题】Google Charts 折线图未显示 0-100 作为百分比刻度【英文标题】：Google Charts line chart not showing 0-100 as a percentage scale 【发布时间】：2016-01-14 23:00:16 【问题描述】：我正在尝试创建一个基本的Google Charts line chart 来显示 3 个值随时间变化的百分比。图表正在显示，但我很难让 vAxis 显示 0 - 100%，最高值只是我数据集中的最高值 (45%)。
这是我正在使用的代码：
<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 值的值，则忽略数据。”但我显然错过了一些东西，因为这似乎没有被使用。
【问题讨论】：
【参考方案1】：您正在使用材料图表 Google api，请尝试使用：
vAxis:
format: "#.#%",
viewWindow:
max:1.0,
min:0.2
【讨论】：
以上是关于Google Charts 折线图未显示 0-100 作为百分比刻度的主要内容，如果未能解决你的问题，请参考以下文章