在图表的不同位置显示多条垂直线

Question

我想在 dygraphs 中 x 轴上的点上绘制垂直线。

他们应该：

自动跨越整个y轴，但不阻止其他系列在手动缩放到x轴范围时自动放大y轴
完全垂直
没有连接它们的水平线

从这个意义上说，很像在随机点绘制多条额外的轴线。

但是，如果它们具有与常规系列图相同的特征，那将会很有帮助，因为当它悬停在上面时，标签会沿 x 轴显示它的值。

以防万一，它们将与其他系列线绘制在同一图表上，并且可能具有也可能不具有与这些系列相同的 x 轴值。

如何实现？

Answer 1

一种画垂直线的方法，就是使用underlayCallback。它允许您绘制图形的背景。

这是在 X=100、X=200 和 X=500 处绘制 3 条垂直线的示例：

<script src="https://cdnjs.cloudflare.com/ajax/libs/dygraph/1.1.1/dygraph-combined.js"></script>
<div id="div_g" style="width:400px; height:200px;"></div>
<script>
  // A basic sinusoidal data series.
  var data = [];
  for (var i = 0; i < 1000; i++) {
    var base = 10 * Math.sin(i / 90.0);
    data.push([i, base]);
  }

  new Dygraph(
    document.getElementById("div_g"),
    data, {
      labels: ['X', 'Y'],
      underlayCallback: function(canvas, area, g) {
        canvas.strokeStyle = 'red';
        var lines = [100, 200, 500];
        for (var idx = 0; idx < lines.length; idx++) {
          var canvasx = g.toDomXCoord(lines[idx]);
          var range = g.yAxisRange();
          canvas.beginPath();
          canvas.moveTo(canvasx, g.toDomYCoord(range[0]));
          canvas.lineTo(canvasx, g.toDomYCoord(range[1]));
          canvas.stroke();
          canvas.closePath();
        }
      }
    }
  );
</script>

在图表的不同位置显示多条垂直线

Display multiple vertical lines on graph at various positions

javascript

dygraphs