在我的Ionic 4 / Angular应用程序中,Chart.js不会调用pl​​ugins.datalabels.formatter()

时间:2019-04-09 10:20:46

标签: angular ionic-framework charts

我希望在我的Ionic 4 / Angular应用程序中在Chart.js饼图的饼图上绘制百分比。

我的Chart.js版本是2.8.0

我有以下发现here的代码,在这里可以看到它的工作原理。但是,当我添加它时,我的formatter()就没有被调用(我添加了一个断点,而它却没有被调用)

        public ngOnInit() : void {
        this.data = {
          datasets: [{
            data: [10, 20, 30, 50],
            backgroundColor: [
              'green',
              'rgba(54, 162, 235, 0.2)',
              'rgba(255, 206, 86, 0.2)',
              'rgba(75, 192, 192, 0.2)',
              'rgba(153, 102, 255, 0.2)',
              'rgba(255, 159, 64, 0.2)'
            ],
          }],

          labels: [
            'Red',
            'Yellow',
            'Blue',
            'another'
          ]
        };

        let options = {
          responsive: true,
          maintainAspectRatio: false,
          legend: {
            position: 'bottom',
            boxWidth:10
          },
          tooltips: {
            enabled: false
          },
          plugins: {
            datalabels: {
              formatter: (value, ctx) => { // this is never called
                return 'hello';
                let sum = 0;
                let dataArr = ctx.chart.data.datasets[0].data;
                dataArr.map(data => {
                  sum += data;
                });
                let percentage = (value * 100 / sum).toFixed(2) + "%";
                return percentage;


              },
              color: 'black',
            }
          }
        };
        this.chart = new Chart(this.chartRef.nativeElement, { 
          type: 'pie',
          data: this.data,
          options: options
        });
      }

任何人都不会知道为什么这对我不起作用。除此之外,图表上的大多数其他内容似乎都可以正常工作。

在此先感谢您的帮助。

0 个答案:

没有答案