谷歌图表日期轴标签不正确

Question

我一直在研究具有日期轴的 Google 折线图。我注意到轴标签的刻度由网格线的数量决定，并且与我传递的数据不同。有人可以告诉我如何强制轴标签与我传递的数据同步。 请找到小提琴的链接：https://jsfiddle.net/FarhanI/5ga6xu44/

  function drawChart() {

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

    data.addRows([
      [new Date(2015, 0, 1), 5],
      [new Date(2015, 0, 7), 3],[new Date(2015, 0, 14), 3], [new Date(2015, 0, 21), 2],[new Date(2015, 0, 28), 8],
    ]);


    var options = {
      title: 'Rate the Day on a Scale of 1 to 10',
      width: 900,
      height: 500,
      hAxis: {
        format: 'M/d/yy',
        gridlines: {count: 9}
      },
      vAxis: {
        gridlines: {color: 'none'},

      }
    };

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

    chart.draw(data, options);

    var button = document.getElementById('change');

    button.onclick = function () {

      // If the format option matches, change it to the new option,
      // if not, reset it to the original format.
      options.hAxis.format === 'M/d/yy' ?
      options.hAxis.format = 'MMM dd, yyyy' :
      options.hAxis.format = 'M/d/yy';

      chart.draw(data, options);
    };
  }

我还试图让网格线显示为 y 轴，因为我无法使用折线图获得 Y 轴。我尝试将网格线指定为 1，但我也只能在 X 轴的中间获得 1 条网格线。

有人可以告诉我是否可以使用折线图获得 Y 轴。

感谢您的帮助， 法尔汉。

Answer 1

您可以提供自定义hAxis.ticks

要与数据同步，请使用每行的日期构建一个数组

// load custom ticks
var ticks = [];
for (var i = 0; i < data.getNumberOfRows(); i++) {
  ticks.push(data.getValue(i, 0));
}

然后在配置选项中使用数组

  hAxis: {
    format: 'M/d/yy',
    ticks: ticks
  }

注意：不遵循 y 轴所需的内容，请您澄清一下...
--> 用折线图获取Y轴

如果您只是想查看网格线，请从配置选项中删除以下内容...

  vAxis: {
    gridlines: {color: 'none'}
  }

请参阅以下工作 sn-p...

google.charts.load('current', {
  callback: function () {
    var data = new google.visualization.DataTable();
    data.addColumn('date', 'Time of Day');
    data.addColumn('number', 'Rating');

    data.addRows([
      [new Date(2015, 0, 1), 5],
      [new Date(2015, 0, 7), 3],
      [new Date(2015, 0, 14), 3],
      [new Date(2015, 0, 21), 2],
      [new Date(2015, 0, 28), 8]
    ]);

    // load custom ticks
    var ticks = [];
    for (var i = 0; i < data.getNumberOfRows(); i++) {
      ticks.push(data.getValue(i, 0));
    }

    var options = {
      title: 'Rate the Day on a Scale of 1 to 10',
      width: 900,
      height: 500,
      hAxis: {
        format: 'M/d/yy',
        ticks: ticks
      }
    };

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

    var button = document.getElementById('change');
    button.onclick = function () {
      // If the format option matches, change it to the new option,
      // if not, reset it to the original format.
      options.hAxis.format === 'M/d/yy' ?
      options.hAxis.format = 'MMM dd, yyyy' :
      options.hAxis.format = 'M/d/yy';
      chart.draw(data, options);
    };
  },
  packages:['corechart']
});

<script src="https://www.gstatic.com/charts/loader.js"></script>
<input type="button" id="change" value="Change" />
<div id="chart_div"></div>