如何在Plotly中通过循环批量绘制多条shape垂直参考线

核心原理 #

Plotly的shapes配置项本身支持传入包含多个图形配置对象的数组，你只需要遍历动态更新的data数组，为每个元素生成对应的垂直参考线配置，再整体赋值给shapes即可，完全可以用for循环实现。

具体实现方法 #

方法1：for循环实现 #

// 初始化空的shapes数组
let shapes = [];
// 遍历data数组的每个元素
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",
    }
  })
}
// 将生成的shapes数组传入Plotly配置
let layout = {
  // 其他布局配置...
  shapes: shapes
}

方法2：数组map方法（更简洁的写法） #

let layout = {
  // 其他布局配置...
  shapes: data.map(xVal => ({
    type: "line",
    xref: "x",
    yref: "paper",
    x0: xVal,
    y0: 0,
    x1: xVal,
    y1: 1,
    line: {
      color: "red",
      width: 2,
      dash: "longdash",
    }
  }))
}

动态更新场景适配 #

点击按钮更新data数组后，需要重新生成shapes数组，再调用Plotly的更新方法刷新图表，示例如下：

// 按钮点击触发的更新逻辑
document.getElementById('updateBtn').addEventListener('click', function() {
  // 这里是你更新data数组的逻辑
  data = [10, 20, 30]; // 示例更新后的数组
  // 重新生成shapes
  const newShapes = data.map(xVal => ({
    type: "line",
    xref: "x",
    yref: "paper",
    x0: xVal,
    y0: 0,
    x1: xVal,
    y1: 1,
    line: {
      color: "red",
      width: 2,
      dash: "longdash",
    }
  }))
  // 更新图表布局，chartId替换为你的图表DOM元素ID
  Plotly.relayout('chartId', { shapes: newShapes });
})

内容的提问来源于stack exchange，提问作者LeonaTheSun