Question

我正在使用ngx-chart 5.3.1＆amp;角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
      // ....
     }
}

ngx-charts：在单击饼图切片上，单击的切片应变为活动状态

2 个答案: