如何在图形中为形状添加名称或标签？(How to add a name or label to shapes in plotly?)

编程入门行业动态更新时间:2024-10-25 16:20:14

我创建了一个简单的曲线图，如下所示：

现在，我想在'layout'下的'shapes'中创建的threshold1和threshold2中添加一个名称或标签。我搜索了一下情节JS文档，但没有得到任何有用的东西。我怎样才能做到这一点。任何帮助，将不胜感激。

I have created a simple plotly line graph as follows:

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>

更多推荐

本文发布于:2023-07-04 16:52:00，感谢您对本站的认可！

本文链接:https://www.elefans.com/category/jswz/34/1026865.html