Question

我正在使用Google Charts构建柱形图。它是一张图表，显示过去30天内特定网页的综合浏览量。我使用以下JavaScript代码创建它（完整的未切割小提琴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);
    }

这非常有效，它提供了一个接近我需要的图表，但图表是＆＃34;放大＆＃34;在唯一的非空数据上：

Chart

这样，看起来4月22日的2个观点实际上涵盖了4月12日至4月22日期间，情况并非如此。

如何使图表防止放大？理想情况下，它应该适合它所关注的时期的网格线。

Answer 1

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

＆＃13;

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

＆＃13;

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

＆＃13;

阻止Google图表放大

1 个答案: