如何使用Ngx-Charts customColor函数增加系列其余部分的不透明度并突出显示所选元素

问题描述

我希望使用ngx-charts构建堆叠的垂直条形图，其中应突出显示所选元素，而系列的其余部分应模糊掉，以产生过滤效果。（附有样品参考图）。我尝试按照ngx-charts文档中所述将JSON传递给activeEntries属性，但是它不起作用，显然github中有很多关于此问题的请求，但ngx团队尚未解决。因此，作为替代方案，我尝试使用接受函数的customColors属性（摘自ngx文档-图表的自定义颜色。用于覆盖特定值的颜色），但是我无法设置不透明度该系列其他部分的内容。

Sample reference image - before selection is done in stacked chart

Sample reference image - after selection is done in stacked chart

我的代码

html

 <ngx-charts-bar-vertical-stacked #stackVertical [view]="view" [scheme]="'picnic'" [results]="monthlyRevenueTrendAnalysis" [gradient]="false" [xAxis]="true" [yAxis]="true" [legend]="true" [legendPosition]="'below'" [showXAxisLabel]="false" [showYAxisLabel]="false" [xAxisLabel]="'Month/Year'[yAxisLabel]="'Revenue(in ₹ )'" [animations]="true" [showDataLabel]="true" [barPadding]="8" (select)="onStackSelect($event)" [customColors]="setCustomColors($event)">

组件

setCustomColors(data) {
const a = data.name;
const b= data.series
let result: any[] = [];
for (let i = 0; i < this.monthlyRevenueTrendAnalysis.length; i++) {
   if (this.monthlyRevenueTrendAnalysis[i].name ! = a) {
      result.push({"name": this.monthlyRevenueTrendAnalysis[i].name,"value": "#ff0000"});  //instead of color how can I increase opacity
   }
   else{
      result.push({"name": this.monthlyRevenueTrendAnalysis[i].name,"value": "#33cc33"});  // instead of color how can I highlight the selected element
   }
}
return result; }

编辑：我尝试将其应用于饼图，并且它覆盖了加载时的默认颜色，而不是单击饼中的切片时应用了颜色请找到相同的stackblitz链接

https://stackblitz.com/edit/angular-ivy-291naj?file=src%2Fapp%2Fapp.component.ts

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

angular angular ngx-charts