点击上下按钮调整Plotly柱状图柱子位置异常：图例变柱子不动

问题场景 #

实现点击上下按钮调整动态plotly-plot柱状图的柱子位置，仅通过箭头点击互换相邻柱子位置。当前图例已成功互换，但图表中的柱子位置未发生变化。

原代码问题分析 #

1. 数据源不匹配：Plotly组件绑定的是graph.selectedGraph.data，但TypeScript代码中操作的是this.graph.data，两者不一致导致图表无法感知数据变化。
2. 方法绑定错误：HTML按钮绑定的upBar()/downBar()方法，在TS中未实现，实际定义的方法是barClickedEvent，点击按钮无法触发逻辑。
3. 边界判断逻辑缺陷：原代码中graphBarIndex < this.graph.data.length - 1的判断会限制向上移动的场景，且缺失向下移动的边界校验。
4. 变更检测未触发：直接修改数组元素后未创建新数组，Angular无法感知数据源变化，Plotly不会更新视图。

修正后的完整代码 #

HTML部分 #

<div style="background-color: green; height: 20px">
  <button (click)="moveBar('up')">Up</button>
  <button (click)="moveBar('down')">Down</button>
</div>

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

TypeScript部分 #

// 记录当前选中的柱子索引
selectedBarIndex: number = -1;

// 点击柱子时记录选中项索引
onBarClick(event: any) {
  if (!event.points?.length) return;
  const clickedBarName = event.points[0].data.name;
  this.selectedBarIndex = this.graph.selectedGraph.data.findIndex(item => item.name === clickedBarName);
}

// 核心移动逻辑
moveBar(direction: 'up' | 'down') {
  if (this.selectedBarIndex === -1 || !this.graph.selectedGraph.data?.length) return;

  const data = this.graph.selectedGraph.data;
  let targetIndex = this.selectedBarIndex;

  // 校验移动方向的合法性
  if (direction === 'up' && targetIndex < data.length - 1) {
    targetIndex += 1;
  } else if (direction === 'down' && targetIndex > 0) {
    targetIndex -= 1;
  } else {
    return; // 超出边界，终止操作
  }

  // 互换两个柱子的数据位置
  [data[this.selectedBarIndex], data[targetIndex]] = [data[targetIndex], data[this.selectedBarIndex]];

  // 创建新数组触发Angular变更检测，强制Plotly更新视图
  this.graph.selectedGraph.data = [...data];
  // 更新选中索引为移动后的位置
  this.selectedBarIndex = targetIndex;
}

关键修正点说明 #

1. 对齐数据源：所有数据操作直接针对graph.selectedGraph.data，与Plotly组件绑定的数据源保持一致，确保修改能同步到图表。
2. 统一事件处理：用moveBar方法接收方向参数，简化代码逻辑，同时修正了HTML与TS方法绑定不匹配的问题。
3. 添加选中逻辑：通过onBarClick监听柱子点击事件，记录当前操作的柱子索引，让上下按钮明确操作目标。
4. 完善边界校验：分别对向上、向下移动做边界判断，避免越界操作。
5. 强制变更检测：通过[...data]创建新数组，触发Angular的变更检测机制，让Plotly组件感知到数据变化并重新渲染图表。

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