Question

vaxis上的0和-5网格线没有用，因为我的数据在-10附近。但是不加-15。有什么帮助吗？我确定必须有一个选择。

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)
  }

请参阅以下工作片段...

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>

图表边缘上的Google图表绘制线

1 个答案: