Question

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

他们应该：

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

从这个意义上讲，就像在随机点上绘制多条额外的轴线一样。

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

如果重要，它们将绘制在与其他系列线相同的图形上，并且可能具有或不具有与这些系列相同的x轴值。

如何实现？

Answer 1

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

以下是在X = 100，X = 200和X = 500：

处绘制3条垂直线的示例

＆＃13;

<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>

＆＃13;

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

1 个答案: