网格线的 Dygraph 自定义颜色

Question

我想为 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'               
            }
   );

这是我想要做的：

Answer 1

您可以使用 underlayCallback. Check out the 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);
    }
  }
);

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

网格线的 Dygraph 自定义颜色

Dygraph custom color for grid lines

charts

dygraphs

gridlines