Google Charts hAxis网格线在周期间隔下失效问题咨询

这是Google Charts针对日期轴的内置逻辑限制，并非Bug。

原因说明 #

当使用日期型数据作为横轴时，Google Charts会自动采用时间轴的智能刻度策略：

• 若日期连续（按日/按月），图表会根据gridlines.count或数据密度绘制对应网格线；
• 若日期存在固定间隔（比如仅周日）且数据点较多时，图表会优先对齐自然时间刻度（如月初、季度起始），认为密集的垂直网格线会降低可读性，因此忽略gridlines.count的设置，只显示主要时间节点的网格线。

解决办法 #

方法1：将日期转为离散字符串轴

把日期格式化为字符串类型，让横轴变为离散轴，这样每个数据点都会对应一条垂直网格线，完全自定义可控：

google.charts.load('current', {packages: ['corechart', 'line']});
google.charts.setOnLoadCallback(drawBackgroundColor);

function drawBackgroundColor() {
  var data = new google.visualization.DataTable();
  // 将日期列改为字符串类型
  data.addColumn('string', 'X');
  data.addColumn('number', 'Dogs');

  // 日期转为格式化字符串
  data.addRows([
    ['2023-05-23', 0],   ['2023-05-30', 10],
    ['2023-06-07', 12], ['2023-06-14', 1],['2023-06-21', 12], 
    ['2023-06-28', 1], ['2023-07-04', 1], ['2023-07-11', 12],
    ['2023-07-18', 5], ['2023-07-25', 6], ['2023-08-02', 5],
    ['2023-08-09', 5], ['2023-08-16', 3], ['2023-08-23', 15],
  ]);

  var options = {
    hAxis: {
      title: 'Time'
    },
    vAxis: {
      title: 'Popularity'
    },
    backgroundColor: '#f1f8e9'
  };

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

方法2：手动设置gridlines.ticks

直接用数据中的日期生成ticks数组，强制图表为每个日期绘制网格线：

google.charts.load('current', {packages: ['corechart', 'line']});
google.charts.setOnLoadCallback(drawBackgroundColor);

function drawBackgroundColor() {
  var data = new google.visualization.DataTable();
  data.addColumn('date', 'X');
  data.addColumn('number', 'Dogs');

  data.addRows([
    [new Date(2023,04,23), 0],   [new Date(2023,04,30), 10],
    [new Date(2023,05,7), 12], [new Date(2023,05,14), 1],[new Date(2023,05,21), 12], 
    [new Date(2023,05,28), 1], [new Date(2023,06,4), 1], [new Date(2023,06,11), 12],
    [new Date(2023,06,18), 5], [new Date(2023,06,25), 6], [new Date(2023,07,2), 5],
    [new Date(2023,07,9), 5], [new Date(2023,7,16), 3], [new Date(2023,07,23), 15],
  ]);

  // 提取所有日期作为ticks
  var dateTicks = data.getDistinctValues(0);

  var options = {
    hAxis: {
      title: 'Time',
      gridlines: {
        // 强制使用数据中的每个日期作为网格线刻度
        ticks: dateTicks
      }
    },
    vAxis: {
      title: 'Popularity'
    },
    backgroundColor: '#f1f8e9'
  };

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

内容的提问来源于stack exchange，提问作者Sergey Ch.