Chart.js v3.60 -在圆环图的工具提示标签末尾添加%符号？

kpbpu008 于 2022-11-23 发布在 Chart.js

关注(0)|答案(2)|浏览(163)

我需要如何修改下面的代码，以便在工具提示值的末尾添加一个%符号？
我已经尝试了很多不同帖子的解决方案，但它们似乎都是2.0版的解决方案。我不知道该在回调行中写些什么。

const ctx = document.getElementById('myChart');
const myChart = new Chart(ctx, {
    type: 'doughnut',
    data: {
        datasets: [{
            data: [12, 19, 3, 5, 2],
            backgroundColor: [
                '#b59671',
                '#c7ba53',
                '#7da35a',
                '#4c77ba',
                '#000000'
            ],
            borderColor: [
                '#b59671',
                '#c7ba53',
                '#7da35a',
                '#4c77ba',
                '#000000'
            ],
            borderWidth: 1,
        }]
    },
    options: {
        cutout: 300,
        hoverOffset: 8,
        plugins: {
            tooltip: {
                displayColors: false,
                callbacks: {

                }
            }
        }
    }
});

chart.js

来源：https://stackoverflow.com/questions/70025977/chart-js-v3-60-add-symbol-to-the-end-of-the-tooltip-label-on-a-doughnut-char

2条答案

按热度按时间

ui7jx7zq1#

下面是一个工作示例：

const ctx = document.getElementById('myChart');
const myChart = new Chart(ctx, {
    type: 'doughnut',
    data: {
        datasets: [{
            data: [0.12, 0.19, 0.3, 0.5, 0.2],
            backgroundColor: [
                '#b59671',
                '#c7ba53',
                '#7da35a',
                '#4c77ba',
                '#000000'
            ],
            borderColor: [
                '#b59671',
                '#c7ba53',
                '#7da35a',
                '#4c77ba',
                '#000000'
            ],
            borderWidth: 1,
        }]
    },
    options: {
        cutout: 300,
        hoverOffset: 8,
        plugins: {
            tooltip: {
                displayColors: false,
                callbacks: {
                    label: function(context) {
                        let label = new Intl.NumberFormat('en-US', {
                            style: 'percent',
                            minimumFractionDigits: 0,
                            maximumFractionDigits: 0
                        }).format(context.formattedValue);
                        return label;
                    },
                    title: function(context) {
                      let title = context[0].label;
                      return title;
                    }
                },
            }
        }
    }
});

赞(0）回复(0）举报 2022-11-23

fnvucqvd2#

一个简短的解决方案是在{data.formattedValue}位之后添加%：

plugins: {
    tooltip: {
        callbacks: {label: data => `${data.formattedValue}%` }}}

赞(0）回复(0）举报 2022-11-23

我来回答

Chart.js v3.60 -在圆环图的工具提示标签末尾添加%符号？

2条答案

相关问题

热门标签

最新问答