如何在Chart JS中避免饼图标签上出现NaN

Question

我正在尝试将饼图标签上的'％'符号连接起来。我使用formatter来连接'％'符号，但是它返回的问题像这样NaN%，如下图所示。我想要每个切片带有'％'符号的百分比。我怎样才能做到这一点？有人可以帮我解决我的问题吗？

     axios.post(this.urlRoot + this.api + "retrieve_best_medicine.php")
        .then(response => {
            vm.best_medicines = response.data
                var ctxChart = self.$refs.myChart2.getContext('2d');

                for(var i = 0; i < this.best_medicines.length; i++) {
                    sum += parseFloat(this.best_medicines[i].Quantity);
                }
                if (this.myChart2) this.myChart2.destroy();
                this.myChart2 = new Chart(ctxChart, {
                    type: 'pie',
                    data: {
                        labels: vm.best_medicines.map(item => item.MedicineName),
                        datasets: [{
                        label: 'Total Items',
                        data: vm.best_medicines.map(item => (item.Quantity / sum * 100).toFixed(2)),
                        backgroundColor: this.poolColors(vm.best_medicines.length),
                        borderColor: '#eee',
                        borderWidth: 2
                    }]
                },
                reponsive : true,
                options: {
                    title : {
                        display : true,
                        text : "Most Medicine",
                        fontFamily: "sans-serif",
                        fontSize: 18,
                    },
                    legend: {
                        display: false
                    },
                    tooltips: {
                        enabled: true,
                        mode: "single",
                        callbacks: {
                            title: function (tooltipItem, data) { return 'Medicine: ' + data.labels[tooltipItem[0].index]; },
                            label: function (tooltipItems, data) {
                                return 'Avg: ' + data.datasets[tooltipItems.datasetIndex].data[tooltipItems.index] + "%";      
                            } 
                        }
                    },
                    plugins: {
                        datalabels: {
                            formatter: (value, ctx) => {
                                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: 'white',
                            labels: {
                                title: {
                                    font: {
                                        weight: 'bold',
                                        fontFamily: "'Helvetica Neue', 'Helvetica', 'Arial', sans-serif"
                                    }
                                },
                                value: {
                                    color: 'white'
                                }
                            }
                        }
                    }
                }
            });
        }).catch(e => {
            console.log(e)
        });

Answer 1

我用下面的代码解决了我的问题。您可以在此处阅读信息：Formatting

formatter: value => { return value + '%';}