Google LineChart - 如何根据最大值绘制垂直轴线。行在最大值之前停止

Question

我有一个 Google 折线图，我需要在其中根据最大值绘制垂直轴线。这是场景：

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.

都应该发生类似的情况

我该怎么做？

Answer 1

viewWindow控制轴的可见范围，
不一定是轴上显示的标签。

要控制标签，您需要提供 ticks 选项。

ticks 选项是一个值数组，与轴上的类型相同。
它可以是日期、数字等。

在这种情况下，我们可以使用最大值来构建我们的刻度。

您需要确定每个标签应该增加多少，
比如 100

这里我们设置了max，然后在max下面每100加一个tick，
然后将最大值也添加到刻度。

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>

Google LineChart - 如何根据最大值绘制垂直轴线。行在最大值之前停止

Google LineChart - How to draw vertical axis line based on a max value. Lines stops before the max value

charts

google-visualization