如何在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>