Google图表-缩小单行图表时

Question

我的图表只有一行 {"cols":[{"id":"time","label":"Time","type":"datetime"},{"id":"Value","label":"Value","type":"number"}],"rows":[{"c":[{"v":"Date(2018,7,31, 14, 49, 48, 0)"}]}]}。当我在屏幕上查看图表时，我看到的是“缩小”版本。我宁愿将某些东西“放大”，并在轴上显示正确的日期。如何实现？

我尝试hAxis.viewWindowMode: 'pretty'时没有运气。

Answer 1

您可以使用hAxis.viewWindow.min和max来设置轴的范围。
和hAxis.ticks来控制显示哪个轴标签。

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

google.charts.load('current', {
  packages:['corechart']
}).then(function () {
  var data = new google.visualization.DataTable({
    "cols":[
      {"id":"time","label":"Time","type":"datetime"},
      {"id":"Value","label":"Value","type":"number"},
      {"id":"Value","label":"Value","type":"number"},
      {"id":"Value","label":"Value","type":"number"},
      {"id":"Value","label":"Value","type":"number"},
      {"id":"Value","label":"Value","type":"number"},
    ],
    "rows":[
      {"c":[{"v":"Date(2018,7,31, 14, 49, 48, 0)"}, {"v": 50}, {"v": 31}, {"v": 16}, {"v": 14}, {"v": 5}]}
    ]
  });

  var dateRange = data.getColumnRange(0);

  var options = {
    chartArea: {
      height: '100%',
      width: '100%',
      top: 24,
      right: 16,
      bottom: 60,
      left: 60
    },
    hAxis: {
      format: 'MM/dd/yyyy HH:mm:ss',
      viewWindow: {
        min: new Date(dateRange.min.getFullYear(), dateRange.min.getMonth(), dateRange.min.getDate() - 30),
        max: new Date(dateRange.max.getFullYear(), dateRange.max.getMonth(), dateRange.max.getDate() + 30)
      },
      ticks: data.getDistinctValues(0),
      title: 'Time'
    },
    vAxis: {
      ticks: [0, 15, 30, 45, 60]
    },
  };

  var chart = new google.visualization.ScatterChart(document.getElementById('chart_div'));
  chart.draw(data, options);
});

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