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

我有一个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

请查看屏幕截图。

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

这里的最大值是700,但我需要在789处画一条线。任何verticalAxisMaxValue都应该发生类似的情况。

我该怎么做?

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

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>

本文链接:https://www.f2er.com/3119668.html

大家都在问