在不同位置的圖上顯示多條垂直線

Question

我想在dygraphs的x軸上的點上繪製垂直線。

它們應：

• 跨度自動整個Y軸，但不能防止被自動放大在y軸上其他系列當手動縮放到一個範圍的x軸的
• 完全垂直
• 沒有水平線加入他們

在這個意義上，很像具有隨機點繪製多個額外的軸線。

但是，如果它們具有相同的常規系列圖的特徵，那麼當它懸停時，標籤沿x軸顯示它的值將會很有幫助。

如果它很重要，它們將被繪製在與其他系列線相同的圖上，並且可能與這些系列具有共同的x軸值。

如何實現？

Answer 1

一種繪製垂直線的方法是使用underlayCallback。它允許您繪製圖形的背景。

下面是在X = 100 3條繪製垂直線的樣品，X = 200和X = 500：

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