グラフ上にさまざまな位置に複数の垂直線を表示

Question

x軸の点に垂直線をdygraphsで描画したいとします。

彼らが必要自動的

• スパン全体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>