如何在Google Candlestick Chart中添加垂直网格线？

嘿，我发现你遇到的问题根源在于：Google Charts的离散型类别轴（比如你用的Mon/Tue这类字符串标签）默认不会渲染垂直网格线。要实现你想要的垂直网格效果，我们需要把x轴转换成连续型数值轴（比如日期轴），再做对应的配置调整。

下面是修改后的完整代码，我标注了关键的改动点：

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

function drawChart() {
  // 把x轴的星期标签替换成日期对象，转为连续型轴
  var data = google.visualization.arrayToDataTable([
    ['Date', 'Low', 'Open', 'Close', 'High'],
    [new Date(2024, 0, 1), 28, 28, 38, 38],
    [new Date(2024, 0, 2), 38, 38, 55, 55],
    [new Date(2024, 0, 3), 55, 55, 77, 77],
    [new Date(2024, 0, 4), 77, 77, 66, 66],
    [new Date(2024, 0, 5), 66, 66, 22, 22]
  ]);

  var options = {
    legend: 'none',
    bar: { groupWidth: '100%' },
    candlestick: {
      fallingColor: { strokeWidth: 0, fill: '#a52714' },
      risingColor: { strokeWidth: 0, fill: '#0f9d58' }
    },
    vAxis: {
      gridlines: { count: 10 },
      baseline: 10
    },
    hAxis: {
      // 设置日期格式为星期缩写，和原来的标签保持一致
      format: 'EEE',
      // 手动指定每个刻度对应的日期，确保和蜡烛图位置对齐
      ticks: [
        new Date(2024, 0, 1),
        new Date(2024, 0, 2),
        new Date(2024, 0, 3),
        new Date(2024, 0, 4),
        new Date(2024, 0, 5)
      ],
      // 启用垂直网格线，count设置为数据点数量，保证每个刻度都有网格
      gridlines: {
        count: 5,
        color: '#cccccc' // 可选：自定义网格线颜色，和你期望的效果匹配
      }
    }
  };

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

为什么这样改能解决问题？ #

• 连续型轴支持网格线：离散的字符串轴（类别轴）是为分类数据设计的，Google Charts不会为其生成垂直网格；而日期/数值这类连续轴则完全支持网格线渲染。
• 刻度对齐保证效果：通过ticks手动指定每个数据点的日期，能让刻度标签和蜡烛图完美对齐，同时网格线也会精准地出现在每个蜡烛图的位置，和你期望的效果一致。
• 格式保持一致：用format: 'EEE'把日期轴的标签转回星期缩写，视觉上和你原来的图表没有差异。

如果你不想用日期轴，还有一种进阶方案是通过google.visualization.events.addListener监听ready事件，然后手动在SVG中绘制垂直网格线，但日期轴的方案是最简洁、最符合官方设计规范的，推荐使用。

内容的提问来源于stack exchange，提问作者Larry Martell