Chart.js工具提示：如何输入字符串并添加%符号？

嘿，这两个需求都可以通过Chart.js的plugins.tooltip配置轻松实现！我直接给你修改好的代码，再拆解一下关键部分：

修改后的完整代码 #

<script>
var ctx = document.getElementById('myChart').getContext('2d');
var myChart = new Chart(ctx, {
    type: 'pie',
    data: {
        labels: ['@lang('home/main.korea')', '@lang('home/main.japan')'],
        datasets: [{
            label: [],
            data: [ {!! $koreaPercent !!} , {!! $japanPercent !!} ],
            backgroundColor: ['red', 'blue'],
        }]
    },
    options: {
        plugins: {
            tooltip: {
                // 自定义工具提示的核心配置
                callbacks: {
                    label: function(context) {
                        // 获取当前扇区的标签（国家名称）和数据值
                        var countryName = context.label || '';
                        var percentValue = context.parsed || 0;
                        // 拼接成你想要的工具提示文本：既包含自定义字符串，又加上%符号
                        return `${countryName} 占比：${percentValue}%`;
                    }
                }
            }
        }
    }
});
</script>

关键配置说明 #

• 需求1：在工具提示中添加自定义字符串：
  我们通过context.label获取到你定义的国家名称，然后在回调函数里和任意你想要的字符串（比如示例里的“ 占比：”）拼接，就能生成包含自定义内容的工具提示文本了。你可以根据需要修改拼接的字符串，比如改成"国家：" + countryName + "，百分比："之类的格式。

• 需求2：给工具提示数据添加%符号：
  直接把获取到的数值percentValue和%符号拼接在一起即可，这样工具提示里显示的数值就会带上百分比符号。

这个回调函数的灵活性很高，你可以完全按照自己的需求调整输出的文本格式，比如增加换行、补充额外说明都可以在这里实现。

内容的提问来源于stack exchange，提问作者박보근