Question

我一直在处理有日期轴的Google Line图表。我注意到轴标签的刻度由网格线的数量决定，并且与我传递的数据不同。有人可以告诉我如何强制轴标签与我传递的数据同步。请找到小提琴的链接：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

您可以提供自定义picture1.jpg

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

hAxis.ticks

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

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

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

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

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

请参阅以下工作代码段...

＆＃13;

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

＆＃13;

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

＆＃13;

Google图表日期轴标签不正确

1 个答案: