如何在Angular应用中阻止点击Plotly图例时隐藏柱状图

要实现点击Plotly图例时不隐藏对应柱状图，你可以通过两步配置彻底禁用默认的图例点击隐藏行为：

1. 从布局层面禁用默认行为（最可靠） #

在图表的Layout配置中，设置legend.itemclick: false，直接告诉Plotly不要在点击图例项时切换轨迹可见性：

// 组件中初始化/更新图表布局的代码示例
this.graph.selectedGraph.layout = {
  // 保留你原有的布局配置（如标题、坐标轴设置等）
  legend: {
    itemclick: false, // 核心配置：关闭图例点击隐藏轨迹的默认功能
    // 其他图例样式配置可按需保留
  }
};

2. 完善事件处理逻辑 #

在launchColorPicker方法中，同时阻止事件冒泡和默认行为，确保自定义逻辑执行且不会触发Plotly的默认操作：

launchColorPicker(event: any) {
  // 执行你原本的颜色选择器逻辑
  // 阻止事件继续传播和默认行为
  event.stopPropagation();
  event.preventDefault();
}

修改后的模板代码可简化事件绑定（把阻止逻辑移到方法内更清晰）：

<plotly-plot
  [divId]="graph.selectedGraph.name"
  [data]="graph.selectedGraph.data"
  [config]="graph.selectedGraph.config"
  [layout]="graph.selectedGraph.layout"
  (relayout)="draggedShape($event)"
  [ngClass]="{ 'single-data': graph.data && graph.data.length === 1 }"
  (legendClick)="launchColorPicker($event)"
>
</plotly-plot>

说明 #

• legend.itemclick: false是从Plotly底层配置禁用该功能，是最根本的解决方案；
• 事件中阻止冒泡和默认行为是双重保险，避免因组件事件传递机制的差异导致默认行为漏触发。

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