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

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)

这将返回一个具有列的min 和max 值的对象

var range = data.getColumnRange(1);

  viewWindow: {
    min: range.min,
    max: range.max
  }

或者如果你想在边缘留一点空间

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

请参阅以下工作 sn-p...

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>