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

目前,这是通过使用2个其他常量数据系列来实现的,但我怀疑还有更好的方法。
underlayCallback似乎是更好的选择,但是我不清楚如何使用canvas.fillRectg.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);
          }

最佳答案

这是一个概念验证插件,可以完成此操作:

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

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

09-16 23:31