NG2图表中的“甜甜圈图表图例”中的无效删除线(chartjs)

时间:2019-11-18 22:03:05

标签: javascript angular chart.js ng2-charts

我创建了一个甜甜圈图,除图例外,它的工作原理非常好。图例的功能有效。图例的样式有问题。加载图表时,图例中有几项显示为删除线,即使它们在图表中处于活动状态也是如此。当我单击该项目时,图表会进行调整,但是无论如何该项目均会保留删除线样式。我希望它能正常工作,因为它的设计目的是将项目加载为活动状态,并在图例中进行相应的样式设置,并且仅在单击以在图表中禁用时才会删除线。

 // Doughnut Charts
  public doughnutChartType: ChartType = 'doughnut';
  public doughnutChartOptions = { aspectRatio: 1.5 };
  public allActivitiesDoughnutChartLabels: Label[] = [
    'Assignments Completed',
    'Number of Assignments',
    'Quizzes Completed',
    'Number of Quizzes',
    'Discussions Completed',
    'Number of Discussions',
    'Learning Activities Completed',
    'Number of Learning Activities'
  ];
  public allActivitiesDoughnutChartData: MultiDataSet;
this.allActivitiesDoughnutChartData = [
      [ this.dashboardData.assignmentCountCompleted, this.dashboardData.assignmentCount ],
      [ 0, 0, this.dashboardData.quizCountCompleted, this.dashboardData.quizCount ],
      [ 0, 0, 0, 0, this.dashboardData.discussionCountCompleted, this.dashboardData.discussionCount ],
      [ 0, 0, 0, 0, 0, 0, this.dashboardData.learningActivityCountCompleted, this.dashboardData.learningActivityCount ]
    ];

这是视图...

<canvas
 baseChart
 [data]="allActivitiesDoughnutChartData"
 [labels]="allActivitiesDoughnutChartLabels"
 [chartType]="doughnutChartType"
 [options]="doughnutChartOptions"
 [legend]="false">
</canvas>

屏幕截图...

enter image description here

0 个答案:

没有答案