在 Plotly 中用循环制作形状

Question

到目前为止我得到了这个代码`

shapes: [
    {
      type: "line",
      xref: "x",
      yref: "paper",
      x0: data[i],
      y0: 0,
      x1: data[i],
      y1: 1,
      line: {
        color: "red",
        width: 2,
        dash: "longdash",
      },
    },
  ],

我想在我的绘图中的特定位置设置一条垂直线，这很好用。现在我怎样才能做更多完全相同的行？因为我的数据数组将在按钮后更新。如果我的阵列中只有一个点，我会得到一条线，但如果尝试设置第二条线，它就不会起作用。我能以某种方式制作一个 for 循环来绘制这些线吗？我只想在不同的地方绘制不止一条垂直车道。

Answer 1

您可以将 shapes 构造为包含多个字典的数组：形式为 [{shape 1 info}, ..., {shape N info}] 的内容。为此，您可以遍历 data 数组，并使用 data[i] 作为 shapes 数组中每一行的 x 坐标。

这是一些示例代码和 codepen。

var data = [1,2,3,5]
shapes = []
for (let i = 0; i < data.length; i++) {
  shapes.push({
      type: "line",
      xref: "x",
      yref: "paper",
      x0: data[i],
      y0: 0,
      x1: data[i],
      y1: 1,
      line: {
        color: "red",
        width: 2,
        dash: "longdash",
      },
   })
}

var trace1 = {
  x: [2, 6],
  y: [1, 2],
  mode: 'markers+lines'
};

var layout = {
  title: 'Vertical Line Annotations',
  xaxis: {
    range: [0, 7]
  },
  yaxis: {
    range: [0, 6]
  },
  shapes: shapes
};

var plotdata = [trace1];

Plotly.newPlot('myDiv', plotdata, layout);

在 Plotly 中用循环制作形状

makes shapes with loop in Plotly

javascript

plotly

plotly.js