여러 위치에서 그래프에 수직선을 여러 개 표시

Question

dygraphs에 x 축의 점에 수직선을 그려야합니다.

그들이해야 :

• 스팬 자동 전체 Y 축 있지만 수동 X 축 범위를 확대 할 때 자동으로 Y 축에 확대되는 다른 계열을 방해하지
• 완전히 수직으로
는 그런 의미에서 그들에게

에 합류 더 수평 라인이없는 임의의 지점에서 그려진 여러 여분의 축 라인을 가지고 같은 많은.

그러나 정상적인 시리즈 플롯의 기능을 사용하면 마우스로 가리키면 레이블이 x 축을 따라 값을 표시한다는 점에서 유용 할 것입니다.

중요한 경우 다른 계열 선과 같은 그래프에 플롯되며 해당 계열과 공통된 x 축 값을 가질 수도 있고 그렇지 않을 수도 있습니다.

어떻게 달성 할 수 있습니까?

Answer 1

세로선을 그리는 방법은 underlayCallback을 사용하는 것입니다. 그래프의 배경을 그릴 수 있습니다.

여기서, X = 200, X = 500 X = 100 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>