Chart.js 当值大于 1000 时不会显示百分比标签？

Question

目前正在制作应急资金计算器，但遇到了 chart.js

的障碍

找到了如何使 chart.js 标签显示为百分比，但我的一个数据值一达到 1000，我就得到“NaN%”。奇怪的是，其他较小的值仍会显示正确的百分比.数据来自每月支出的 4 个类别中的每一个，当您从每个选项卡中添加内容时，一旦任何值达到 1000+，您就会在饼图中得到“NaN%”。

我的网站上有计算器 https://danacarroll.com/eCalc/

这是图表的代码，在 callbacks 处开始计算百分比。这是我第一次使用 chart.js，对不起，如果这是一个简单的修复，我只是没有注意到！

我注释掉的百分比计算是我找到的原始计算，我认为将其调高一点会有所帮助，但似乎并没有（BEDMAS无论如何都赢哈哈）。

感谢任何帮助，再次感谢！ :)

const ctx = document.getElementById('chart').getContext('2d');
const myChart = new Chart(ctx, {
    type: 'pie',
    data: {
        labels: ['Housing Monthly', 'Transportation Monthly', 'Food & Health Monthly', 'Loans & Other Monthly'],
        datasets: [{
            data: chartData,
            backgroundColor: [
                'rgba(255, 99, 132, 0.2)',
                'rgba(54, 162, 235, 0.2)',
                'rgba(255, 206, 86, 0.2)',
                'rgba(75, 192, 192, 0.2)'
            ],
            borderColor: [
                'rgba(255, 99, 132, 1)',
                'rgba(54, 162, 235, 1)',
                'rgba(255, 206, 86, 1)',
                'rgba(75, 192, 192, 1)'
            ],
            borderWidth: 1,
            tooltip: {
                callbacks: {
                    label: function(context) {
                        let label = context.label;
                        let value = context.formattedValue;
        
                        if (!label)
                            label = 'Unknown'
        
                        let sum = 0;
                        let dataArr = context.chart.data.datasets[0].data;
                        dataArr.map(data => {
                            sum += Number(data);
                        });
        
                     
                        // (old calc) let percentage = (value * 100 / sum).toFixed(2) + '%';
                        let percentage = ((value / sum) * 100).toFixed(2) + '%';
                        return label + ": " + percentage;
                    }
                }
            }
        }]
    }, options: {
        maintainAspectRatio: false,
        plugins: {
            legend: {
                // display: false
            }
        }
    }
});

Answer 1

问题是 formattedValue 是一个字符串，它使用逗号作为分隔符。 Javascript 如果没有无效字符，可以自动将字符串转换为数值，但逗号无效导致您的情况超过 1000。

你可以使用

let value = context.parsed;

Chart.js 当值大于 1000 时不会显示百分比标签？

Chart.js won't display percentage label when value is above 1000?

javascript

chart.js