如何在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'
        }
    }
    ]
};

添加'shapes'参数仅在我指定的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>