如何获取Plotly图例中线条显示/隐藏的当前状态？

API 探路者

2026-5-12

获取Plotly图例线条的显示/隐藏状态

当然可以获取Plotly图例中各线条的显示或隐藏状态啦！你提供的通过DOM查询查看_fullLayout的思路完全正确，下面给你细化一下具体的实现方式：

核心思路

Plotly会把图表的所有布局和数据状态存在图表元素的_fullLayout属性里，其中每个数据系列的visible字段就对应了它的显示/隐藏状态：

true：系列处于显示状态
false：系列被强制隐藏
"legendonly"：系列通过点击图例被隐藏

优化后的代码示例

你可以直接基于你给出的代码扩展，来精准获取每个系列的状态：

// 替换成你的图表对应的ID前缀
const targetPlotId = "your-plot-id";
document.querySelectorAll(`[id^="plot_${targetPlotId}"]`).forEach((plotElement) => {
  // 遍历所有数据系列，打印名称和状态
  plotElement._fullLayout.data.forEach((trace, index) => {
    console.log(`第 ${index + 1} 个系列（名称：${trace.name}）的可见状态：${trace.visible}`);
  });
  
  // 也可以查看图例的整体配置信息
  console.log("图例整体配置详情：", plotElement._fullLayout.legend);
});

更实用的实时监听方式

如果你的图表是用Plotly.js直接创建的，建议保存图表实例，然后监听图例点击事件，这样能实时获取状态变化：

const plotContainer = document.getElementById('my-plot-container');
// 创建图表并保存实例关联
Plotly.newPlot(plotContainer, yourData, yourLayout).then(() => {
  // 监听图例点击事件
  plotContainer.addEventListener('plotly_legendclick', () => {
    // 每次点击后立即获取最新状态
    plotContainer._fullLayout.data.forEach(trace => {
      console.log(`${trace.name} 当前可见状态：${trace.visible}`);
    });
  });
});