Question

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

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

现在，我想在我已经在＆＃39;形状＆＃39;中创建的threshold1和threshold2添加名称或标签。在＆＃39;布局＆＃39;。我搜索了那些阴谋的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

您可以使用注释：

    layout.annotations = [
        {
            showarrow: false,
            text: "Your text here",
            align: "right",
            x: 1,
            xanchor: "right",
            y: threshold1,
            yanchor: "bottom"
        },
       {
            showarrow: false,
            text: "Your second text here",
            align: "right",
            x: 1,
            xanchor: "right",
            y: threshold2,
            yanchor: "bottom"
        }
    ],

Answer 3

将名称属性添加到跟踪中，如

name = 'Xyz'

This Link可能会帮助您解决问题。

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

3 个答案: