在 Plotly 中使用循环制作形状

Posted 2023-02-18

【中文标题】在 Plotly 中使用循环制作形状

【英文标题】：makes shapes with loop in Plotly

【发布时间】：2021-10-22 18:36:05

【问题描述】：

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

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 循环来绘制这些线条吗？我只想在不同的地方绘制多个垂直车道。

【问题讨论】：

你可以做一个 list 理解。 shapes 是一个列表

【参考方案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);

【讨论】：

我会将此问题标记为已回答，因为这正是我正在寻找的内容，谢谢！

谢谢！我很高兴听到我的回答很有帮助