如何在图形中为形状添加名称或标签?(How to add a name or label to shapes in 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);现在,我想在'layout'下的'shapes'中创建的threshold1和threshold2中添加一个名称或标签。 我搜索了一下情节JS文档,但没有得到任何有用的东西。 我怎样才能做到这一点。 任何帮助,将不胜感激。
I have created a simple plotly line graph as follows:
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);Now, I want to add a name or label to the threshold1 and threshold2 that I have created in 'shapes' under 'layout'. I searched the plotly JS documentation but did'nt get anything useful there. How can I do this. Any help would be appreciated.
最满意答案
您可以使用mode: 'text'创建另一个跟踪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>You could create another trace with mode: 'text'. There is certainly more than one way of doing it but this one is simple and does not need complicated data replication.
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>
更多推荐
发布评论