我有一个Google LineChart,我需要根据最大值绘制垂直轴线。这是场景:
var options = {
vAxis: {
viewWindow: {
min: 0,
max: verticalAxisMaxValue // for my case it is 789. but could be anything.
},
gridlines: {
count: 10 // or something else
}
}
}
verticalAxisMaxValue
的值是在声明options
之前确定的。
我需要绘制要绘制到verticalAxisMaxValue
的垂直轴线(可能是789、858、560,...)我遇到的问题是轴线是正在绘制,但是具有最高值的线永远不会上升到verticalAxisMaxValue
。
请查看屏幕截图。
这里的最大值是700,但是我需要在789处画一条线。并且对于任何verticalAxisMaxValue
都应该发生类似的情况。
我该怎么做?
viewWindow
控制轴的可见范围,不一定是轴上显示的标签。
要控制标签,您需要提供ticks
选项。
ticks
选项是一个值数组,其类型与轴上的类型相同。它可以是日期,数字等。
在这种情况下,我们可以使用最大值来构建刻度线。
您将需要确定每个标签应增加多少,例如100
这里,我们设置最大值,然后在最大值以下每100添加一个勾号,然后将最大值也添加到刻度线。
var verticalAxisMaxValue = 789;
var ticks = [];
for (var i = 0; i < verticalAxisMaxValue; i = i + 100) {
ticks.push(i);
}
ticks.push(verticalAxisMaxValue);
请参阅以下工作片段...
google.charts.load('current', {
packages: ['corechart']
}).then(function () {
var data = google.visualization.arrayToDataTable([
['Month', 'GROWTH TARGET'],
['Apr', 145],
['May', 169],
['Jun', 201],
['Jul', 231],
['Aug', 281],
['Sep', 325],
['Oct', 369],
['Nov', 444],
['Dec', 478]
]);
var verticalAxisMaxValue = 789;
var ticks = [];
for (var i = 0; i < verticalAxisMaxValue; i = i + 100) {
ticks.push(i);
}
ticks.push(verticalAxisMaxValue);
var options = {
vAxis: {
ticks: ticks,
viewWindow: {
min: 0,
max: verticalAxisMaxValue
}
}
};
var chart = new google.visualization.LineChart(document.getElementById('chart'));
chart.draw(data, options);
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart"></div>