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

问题描述 投票:1回答:1
之前停止

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

请查看屏幕截图。

enter image description here

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

我该怎么做?

google-visualization google-linechart
1个回答
0
投票

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>
© www.soinside.com 2019 - 2024. All rights reserved.