図形に名前やラベルをプロットして追加するにはどうすればいいですか？

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); 

を今、私はTHRESHOLD1に名前またはラベルを追加したいと私は「レイアウト」の下に「形」で作成したTHRESHOLD2。私はプロット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 = 'Xyz' 

This Linkのようなあなたのトレースにプロパティに名前を追加します。あなたはそれを修正するために役立つかもしれません。