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。< / p>

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>

如何在plotly js中创建水平阈值线？

1 个答案: