Angular中Plotly柱状图颜色修改未在UI生效，如何解决？

我用以下函数更新plotly-plot柱状图的颜色，但颜色修改未在Angular UI中生效，请问该如何解决？

TypeScript代码：

colorChangeEvent($event) {
    console.log('currentGraph', this.graph);
    console.log('changed colors', $event);
    this.graph.layout.colorway.forEach((item, i) => {
      if (item == $event.currentBarData.marker.color) {
        this.graph.layout.colorway[i] = $event.data;
      }
    });
    this.cdRef.detectChanges();
  }

模板代码：

<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 }"
    #plotlyPlot
  >
  </plotly-plot>

• 修正layout变量绑定不一致问题
  模板里绑定的是[layout]="layout"，但你代码里修改的是this.graph.layout.colorway，这两个变量不是同一个引用。要么把模板的layout绑定改成[layout]="graph.layout"，要么同步修改this.layout的colorway值，保持数据绑定的一致性。

• 替换数组引用触发变更检测
  Angular对数组元素的直接修改（比如this.graph.layout.colorway[i] = ...）不敏感，因为数组引用没变化。改用map创建新数组：

  colorChangeEvent($event) {
    console.log('currentGraph', this.graph);
    console.log('changed colors', $event);
    // 创建新数组替换原数组，触发变更检测
    this.graph.layout.colorway = this.graph.layout.colorway.map(item => 
      item === $event.currentBarData.marker.color ? $event.data : item
    );
    // 移除不必要的detectChanges调用
    // this.cdRef.detectChanges();
  }
  

• 手动调用Plotly的restyle方法强制刷新
  如果上述方法还是不生效，可以直接调用Plotly实例的restyle方法更新图表：

  1. 给模板里的组件添加指令引用：

     <plotly-plot
         ...
         #plotlyPlot="plotly"
       >
       </plotly-plot>
     

  2. 在组件里获取实例并调用方法：

     import { ViewChild } from '@angular/core';
     import { PlotlyComponent } from 'angular-plotly.js';
     
     // 组件类内定义
     @ViewChild('plotlyPlot') plotlyPlot!: PlotlyComponent;
     
     colorChangeEvent($event) {
       // 先更新colorway数组
       this.graph.layout.colorway = this.graph.layout.colorway.map(item => 
         item === $event.currentBarData.marker.color ? $event.data : item
       );
       // 调用restyle刷新图表
       this.plotlyPlot.plotlyInstance.restyle({
         marker: { color: this.graph.layout.colorway }
       });
     }
     

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