防止 Google Chart 放大

Question

我正在使用 Google Charts 构建柱形图。 这是一个图表，显示特定页面在过去 30 天内的综合浏览量。 我使用以下 JavaScript 代码（此处为完整未剪辑的小提琴）创建它：

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 个视图实际上涵盖了 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>