网格线的 Dygraph 自定义颜色

【问题标题】：Dygraph custom color for grid lines网格线的 Dygraph 自定义颜色
【发布时间】：2019-07-23 11:14:46
【问题描述】：

我希望在 x 轴标签中具有日期 (20Jul) 的网格线使用红色，而对于时间 x 轴标签则使用默认（黑色）。

我曾尝试在 Dygraph 选项中使用“gridLineColor”，但它同时适用于所有网格线。

 view.chart = new Dygraph(panelForDygraph,
            data, {
                width: activeTab.getWidth() - 50,
                height: panel.up().up().getHeight() - 150,
                labels: channel,
                labelsSeparateLines: true,
                gridLineColor: 'lightgrey'               
            }
   );

这是我想做的：

【问题讨论】：

标签： charts dygraphs gridlines

【解决方案1】：

您可以使用underlayCallback 绘制任何您喜欢的东西。查看highlighted-region 页面以获取演示。

在你的情况下，你想要这样的东西：

view.chart = new Dygraph(
  panelForDygraph,
  data, {
    width: activeTab.getWidth() - 50,
    height: panel.up().up().getHeight() - 150,
    labels: channel,
    labelsSeparateLines: true,
    gridLineColor: 'lightgrey',
    underlayCallback: function(canvas, area, g) {
      var x1 = g.toDomXCoord(new Date('2019-07-19'));
      var x2 = g.toDomXCoord(new Date('2019-07-20'));

      canvas.fillStyle = 'red';
      canvas.fillRect(x1, area.y, 1, area.h);
      canvas.fillRect(x2, area.y, 1, area.h);
    }
  }
);

您可以根据口味调整宽度和位置。

【讨论】：