如何在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軸，其欲跨越整個曲線圖。爲此，我加入「形狀」在佈局類似下面：

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軸點2和3之間的水平值。

我的問題是如何讓水平線跨越整個圖形而不依賴於x軸值？任何幫助將不勝感激。

Answer 1

您可以設置xref到paper告訴Plotly不依賴於x軸的座標，但相對於整個圖形，即0到1。

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>