谷歌图表在图表边缘绘制线条

Question

vaxis上的0和-5网格线是无用的，因为我的数据大约是-10。不过并没有加-15。有什么帮助吗？我相信肯定有一个选择。

请在此处查看：https://jsfiddle.net/h6u4pa2d/9/

google.charts.load('current', {packages: ['corechart', 'line']});
google.charts.setOnLoadCallback(drawBasic);
function drawBasic() {
var data = new google.visualization.DataTable();
data.addColumn('number', 'X');
data.addColumn('number', 'Dogs');
data.addRows([
[1, -10],   [2, -10.5],  [3, -10.25],
[4, -9.75],   [5, -10],  [6, -10.25]
]);
var options = {
hAxis: {
title: 'Time'
},
vAxis: {
title: 'Popularity'
}
};
var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
chart.draw(data, options);
}

Answer 1

您可以使用配置选项vAxis.viewWindow设置min&轴的max值

viewWindow: {
min: -10.5,
max: -9.75
}

如果要避免对值进行硬编码，
可以使用数据表方法-->getColumnRange(colIndex)

这将返回具有CCD_ 5&列的max值

var range = data.getColumnRange(1);
viewWindow: {
min: range.min,
max: range.max
}

或者如果你想在边缘有一个小房间

viewWindow: {
min: Math.floor(range.min),
max: Math.ceil(range.max)
}

请参阅以下工作片段。。。

google.charts.load('current', {packages: ['corechart']});
google.charts.setOnLoadCallback(drawBasic);
function drawBasic() {
var data = new google.visualization.DataTable();
data.addColumn('number', 'X');
data.addColumn('number', 'Dogs');
data.addRows([
[1, -10],   [2, -10.5],  [3, -10.25],
[4, -9.75],   [5, -10],  [6, -10.25]
]);
var range = data.getColumnRange(1);
var options = {
hAxis: {
title: 'Time'
},
vAxis: {
title: 'Popularity',
viewWindow: {
min: Math.floor(range.min),
max: Math.ceil(range.max)
}
}
};
var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
chart.draw(data, options);
}

<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>