plotly jsで水平しきい値線を作成する方法は？

Question

私はplotly JSを使って簡単な折れ線グラフを作成しています。コードは以下のようなものです：

var trace1 = { 
    x: [1, 2, 3, 4], 
    y: [10, 15, 13, 17], 
    type: 'scatter' 
}; 

var layout = { 
    xaxis:{ 
    title:"X-Axis", 
    tickangle:45, 
    rangemode:'nonnegative', 
    autorange:true, 
    exponentformat: "none" 
    }, 
    yaxis:{ 
    title: "Time", 
    tickangle:45, 
    rangemode:'nonnegative', 
    autorange:false 
    } 
} 
Plotly.newPlot(myDiv,[trace1],layout); 

今私は、グラフ全体で私はグラフ全体にまたがるようにしたい、x軸に平行に水平線を作成したいです。 「形状」パラメータのみI指定したx軸上の点2と3の間の水平方向の値を作成追加

var layout = { 
    xaxis:{ 
    title:"X_Axis", 
    tickangle:45, 
    rangemode:'nonnegative', 
    autorange:true, 
    exponentformat: "none" 
    }, 
    yaxis:{ 
    title: "Time", 
    tickangle:45, 
    rangemode:'nonnegative', 
    autorange:false 
    }, 
    shapes: [ 
    { 
     type: 'line', 
     x0: 2, 
     y0: 12.0, 
     x1: 3, 
     y1: 12.0, 
     line:{ 
      color: 'rgb(255, 0, 0)', 
      width: 4, 
      dash:'dot' 
     } 
    } 
    ] 
}; 

このため、私は以下のようなレイアウトのものに「形状」を追加しました。

私の質問は、x軸の値に依存せずに、グラフ全体にどのように水平線を張るのですか？どんな助けもありがとう。

Answer 1

あなたは、x軸座標に依存しているが、グラフ全体に対してではないPlotly指示れpaperに1に、すなわち0をxrefを設定することができました。

var trace1 = { 
 
    x: [1, 2, 3, 4], 
 
    y: [10, 15, 13, 17], 
 
    type: 'scatter' 
 
}; 
 

 
var layout = { 
 
    shapes: [ 
 
    { 
 
     type: 'line', 
 
     xref: 'paper', 
 
     x0: 0, 
 
     y0: 12.0, 
 
     x1: 1, 
 
     y1: 12.0, 
 
     line:{ 
 
      color: 'rgb(255, 0, 0)', 
 
      width: 4, 
 
      dash:'dot' 
 
     } 
 
    } 
 
    ] 
 
} 
 
Plotly.newPlot(myDiv,[trace1],layout);

<script src="//cdn.plot.ly/plotly-latest.min.js"></script> 
 
<div id='myDiv'></div>