如何在剧情中添加名称或标签到形状？

Question

我创建了一个简单的plotly线图如下：

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', 
range:[0,20], 
autorange: false 
}, 
shapes: [ 
    { 
    type: 'line', 
    xref: 'paper', 
    x0: 0, 
    y0: threshold1, 
    x1: 1, 
    y1: threshold1, 
    line:{ 
     color: 'rgb(255, 0, 0)', 
     width: 2, 
     dash:'dot' 
     }, 
    }, 
    { 
    type: 'line', 
    xref: 'paper', 
    x0: 0, 
    y0: threshold2, 
    x1: 1, 
    y1: threshold2, 
    line:{ 
     color: 'rgb(0, 255, 0)', 
     width: 2, 
     dash:'dot' 
     }, 
    } 
] 
    }; 


Plotly.newPlot(myDiv,[trace1],layout); 

现在，我想一个名称或标记添加到我在“布局”形状'所创建的阈值1和阈值2。我搜查了剧情的JS文档，但没有得到任何有用的东西。我怎样才能做到这一点。任何帮助，将不胜感激。

Answer 1

您可以使用mode: 'text'创建另一条跟踪。当然有不止一种方法，但这个方法很简单，不需要复杂的数据复制。

var threshold1 = 12; 
 
var threshold2 = 16; 
 
var offset = 0.75; 
 

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

 
var trace2 = { 
 
    x: [Math.min.apply(Math, trace1.x) + offset, 
 
     Math.max.apply(Math, trace1.x) - offset], 
 
    y: [threshold1 - offset, threshold2 - offset], 
 
    mode: 'text', 
 
    text: ['lower threshold', 'upper threshold'], 
 
    showlegend: false 
 
} 
 

 
var layout = { 
 
    xaxis: { 
 
    title: "x-axis", 
 
    tickangle: 45, 
 
    rangemode: 'nonnegative', 
 
    autorange: true, 
 
    exponentformat: "none" 
 
    }, 
 
    yaxis: { 
 
    title: "Time", 
 
    tickangle: 45, 
 
    rangemode: 'nonnegative', 
 
    range: [0, 20], 
 
    autorange: false 
 
    }, 
 
    shapes: [{ 
 
    type: 'line', 
 
    xref: 'paper', 
 
    x0: 0, 
 
    y0: threshold1, 
 
    x1: 1, 
 
    y1: threshold1, 
 
    line: { 
 
     color: 'rgb(255, 0, 0)', 
 
     width: 2, 
 
     dash: 'dot' 
 
    }, 
 
    }, { 
 
    type: 'line', 
 
    xref: 'paper', 
 
    x0: 0, 
 
    y0: threshold2, 
 
    x1: 1, 
 
    y1: threshold2, 
 
    line: { 
 
     color: 'rgb(0, 255, 0)', 
 
     width: 2, 
 
     dash: 'dot' 
 
    }, 
 
    }] 
 
}; 
 

 

 
Plotly.newPlot(myDiv, [trace1, trace2], layout);

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

Answer 2

只添加name属性你的跟踪像

name = 'Xyz' 

This Link可以帮助你解决它。