2

我正在使用 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>
4

2 回答 2

4

我在这里看到的是，您在添加活动条目后不会触发更改检测。

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

this.activeEntries.push() 不会触发更改检测，因为引用相同，您应该尝试：

onSelect(event) {
  this.activeEntries = [{...event}];
}
于 2018-04-03T08:16:22.727 回答
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
      // ....
     }
}
于 2018-07-18T08:52:22.357 回答