如何在劇情中添加名稱或標籤到形狀？

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可以幫助你解決它。