ngx-charts：在單擊餅圖切片上，被單擊的切片應變為活動狀態

Question

我正在使用ngx-chart 5.3.1和angular 4.1.1。 單擊時，我想突出顯示餅圖中的特定切片。

在頁面加載時，我給出了靜態數組

this.activeEntries = [{"name" : "users" , value:4}];

頁面加載時，它將正確突出顯示特定的切片。 單擊扇形圖的一個切片時，我嘗試將activeEntries設置為不突出顯示餅圖的特定切片。 我需要突出顯示特定的單擊切片。

零件

export class PieChartComponent implements OnInit {

  @Input() data: SingleChartData[] = this.data ? this.data : [];

  @Input() chartInfo : any;


  private pieChartInfo : PieChart;
  private activeEntries : any[] = [{name:'users',value:4}];

  constructor() { }

  ngOnInit() {
    console.log(this.activeEntries);
    this.chartInfo = this.chartInfo === undefined ? {} : this.chartInfo;
    this.pieChartInfo = new PieChart(this.chartInfo);
  }

  onSelect(event) {
    this.activeEntries = [];
    this.activeEntries.push(event);
  }

模板

<ngx-charts-pie-chart [scheme]="pieChartInfo.colorScheme" 
  [results]="data" 
  [legend]="pieChartInfo.showLegend" 
  [explodeSlices]="pieChartInfo.explodeSlices" 
  [labels]="pieChartInfo.showLabels" 
  [doughnut]="pieChartInfo.doughnut" 
  [gradient]="pieChartInfo.gradient" 
  (select)="onSelect($event)" 
  [view]="pieChartInfo.view"  
  [activeEntries]="activeEntries" >
</ngx-charts-pie-chart>

Answer 1

我在這里看到的是，添加活動條目后，您不會觸發更改檢測。

onSelect(event) {
  this.activeEntries = [];
  this.activeEntries.push(event);
}

this.activeEntries.push（）不會觸發更改檢測，因為您應該嘗試使用相同的引用：

onSelect(event) {
  this.activeEntries = [{...event}];
}

Answer 2

就我而言，我的任務是使餅圖的切片可點擊，以便它們是超鏈接。 我知道我可能會被否決，因為這並不是OP的要求，但這與他的問題非常相似，我為此苦了一個小時。

我只想節省他/她的時間-像我一樣希望餅圖切片是超鏈接，而他像我一樣來到了這個地方。

在bla.component.html中

           <ngx-charts-pie-chart
            [scheme]="pieChartColorScheme"
            [results]="MyDataVariable" 
            [legend]="false"
            [labels]="false"
            [doughnut]="true"
            [gradient]="true"
            (select)="onPieSliceSelect($event)" >   // <-- this is the important line in the template
          </ngx-charts-pie-chart>

而在bla.component.ts中

// When user clicks on a specific slice on the pie chart
onPieSliceSelect(event){   
   // Here is the interesting part
   this.router.navigate(['/myRouteInAppRouting'], {queryParams: {myGetParam: event.name}});

   // Or something like that
   // if (event.name === 'smthing1') {
   //   this.router.navigate(['/myRouteInAppRouting'], {queryParams: {myGetParam: 'running'});
   // } else if (event.name === 'smthing2') {
   //   ... 
   // } 
}

然后在您要重定向到的其他組件中：

ngOnInit(): void {
    this.route.queryParams.subscribe(params => {
      let myGetParams: string = params['myGetParam'];
      // do something with your get params
      // ....
     }
}