Dygraphs - 添加垂直线答案

【问题标题】：Dygraphs - add vertical lineDygraphs - 添加垂直线
【发布时间】：2013-06-10 17:38:03
【问题描述】：

我正在使用 dygraph 绘制一段时间内的温度读数图表。我希望在 y 轴上添加 2 条线，代表高/低阈值。

目前这是通过使用 2 个额外的常量数据系列来实现的，但我怀疑有更好的方法。

underlayCallback 似乎是更好的选择，但我不清楚如何使用 canvas.fillRect 和 g.toComCoords 属性来绘制线条。

目前正在处理下面的示例 (http://dygraphs.com/tests/highlighted-region.html)，它正在渲染一条垂直线。感谢您提供任何帮助。

var g = new Dygraph(
          document.getElementById("div_g"),
          data,
          {
            labels: ['X', 'Est.', 'Actual'],
            animatedZooms: true,
            underlayCallback: function(canvas, area, g) {
              var bottom_left = g.toDomCoords(300, -20);
              var top_right = g.toDomCoords(301, +20);

          var left = bottom_left[1];
          var right = top_right[0];

          canvas.fillStyle = "rgba(255, 0, 0, 1)";
          canvas.fillRect(right, area.y, 1, area.h);
        }

      }
  );

对于任何有兴趣的人，使用以下方法来达到预期的结果：

underlayCallback: function(canvas, area, g) {
          var LowCoords = g.toDomCoords(0, 2.25);   
          var HighCoords = g.toDomCoords(0, 4);

          var high = HighCoords[1];
          var low = LowCoords[1];

          canvas.fillStyle = 'red';
          canvas.fillRect(area.x, low, area.w, 2);
          canvas.fillStyle = 'blue';
          canvas.fillRect(area.x, high, area.w, 2);
          }

【问题讨论】：

标签： dygraphs

【解决方案1】：

这是一个概念验证插件，可以做到这一点：

https://github.com/danvk/dygraphs/pull/215

即使插件不是主要源库的一部分，您也可以使用它，但我建议重命名插件，因为它使用的是 Dygraph 命名空间。

【讨论】：

合并了吗？插件现在有效吗？

【解决方案2】：

替代。解决方案：我想要虚线；这样做的：

underlayCallback: function(ctx, area, g) {

    var LowCoords = g.toDomCoords(0, 2.25);   
    var HighCoords = g.toDomCoords(0, 4);

    var high = HighCoords[1];
    var low = LowCoords[1];
    ctx.beginPath();

    ctx.setLineDash([5,15]);
    ctx.moveTo(0, low);
    ctx.lineTo(10000, low);
    ctx.strokeStyle = 'red';
    ctx.stroke();
    ctx.moveTo(0, high);
    ctx.lineTo(10000, high);
    ctx.strokeStyle = 'red';
    ctx.stroke();
    ctx.setLineDash([]);

}

【讨论】：