javascript - 阻止 Google 图表放大

Question

我正在使用 Google Charts 构建柱形图。这是一个图表，显示过去 30 天内特定页面的综合浏览量。我使用以下 JavaScript 代码创建它(完整未剪切的 fiddle here ):

google.charts.load('current', {packages: ['corechart', 'bar']});
google.charts.setOnLoadCallback(drawBasic);

function drawBasic() {

      var data = new google.visualization.DataTable();
      data.addColumn('date', 'Day');
      data.addColumn('number', 'Visits');

      data.addRows([
        // These data rows come from my database (timestamp + hits)
        [new Date(1458691200 * 1000),null],
        [new Date(1458777600 * 1000),null],
        // This keeps repeating for each day, all with null value
        [new Date(1461283200 * 1000),2],
        [new Date(1461369600 * 1000),null]
      ]);

      var options = {
      chartArea: {
        width: '70%',
        height: '70%'
      },
      hAxis: {
        format: 'd',
        gridlines: {
          count: 15
        },
        title: 'Day'
      },
      vAxis: {
        baseline: 0,
        format: '#',
        gridlines: {
          count: -1
        },
        title: 'Views',
        viewWindowMode:'explicit',
        viewWindow: {
          max: 10,
          min: 0
        }
      }
    };

      var chart = new google.visualization.ColumnChart(
        document.getElementById('chart_div')
      );

      chart.draw(data, options);
    }

这工作得很好，它提供了一个接近我需要的图表，但是该图表在唯一的非空数据上“放大”:

这样看来，4 月 22 日的 2 个 View 实际上涵盖了 4 月 12 日至 4 月 22 日期间，但事实并非如此。

如何让图表不被放大？理想情况下，它应该适合其所在时期的网格线。

Answer 1

我不认为这是缩放问题。
看起来像是 'current' 版本的错误/问题。
版本 '43' 呈现预期的图表...

google.charts.load('43', {packages: ['corechart', 'bar']});
google.charts.setOnLoadCallback(drawBasic);

function drawBasic() {
  var data = new google.visualization.DataTable();
  data.addColumn('date', 'Day');
  data.addColumn('number', 'Visits');

  data.addRows([
    [new Date(1458691200 * 1000),null],
    [new Date(1458777600 * 1000),null],
    [new Date(1458864000 * 1000),null],
    [new Date(1458950400 * 1000),null],
    [new Date(1459036800 * 1000),null],
    [new Date(1459123200 * 1000),null],
    [new Date(1459209600 * 1000),null],
    [new Date(1459296000 * 1000),null],
    [new Date(1459382400 * 1000),null],
    [new Date(1459468800 * 1000),null],
    [new Date(1459555200 * 1000),null],
    [new Date(1459641600 * 1000),null],
    [new Date(1459728000 * 1000),null],
    [new Date(1459814400 * 1000),null],
    [new Date(1459900800 * 1000),null],
    [new Date(1459987200 * 1000),null],
    [new Date(1460073600 * 1000),null],
    [new Date(1460160000 * 1000),null],
    [new Date(1460246400 * 1000),null],
    [new Date(1460332800 * 1000),null],
    [new Date(1460419200 * 1000),null],
    [new Date(1460505600 * 1000),null],
    [new Date(1460592000 * 1000),null],
    [new Date(1460678400 * 1000),null],
    [new Date(1460764800 * 1000),null],
    [new Date(1460851200 * 1000),null],
    [new Date(1460937600 * 1000),null],
    [new Date(1461024000 * 1000),null],
    [new Date(1461110400 * 1000),null],
    [new Date(1461196800 * 1000),null],
    [new Date(1461283200 * 1000),2],
    [new Date(1461369600 * 1000),null]
  ]);

  var options = {
    chartArea: {
      width: '70%',
      height: '70%'
    },
    hAxis: {
      format: 'd',
      gridlines: {
        count: 15
      },
      title: 'Day'
    },
    vAxis: {
      baseline: 0,
      format: '#',
      gridlines: {
        count: -1
      },
      title: 'Views',
      viewWindowMode:'explicit',
      viewWindow: {
        max: 10,
        min: 0
      }
    }
  };

  var chart = new google.visualization.ColumnChart(
    document.getElementById('chart_div')
  );

  chart.draw(data, options);
}

<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>