Chart.JS工具提示回调标签和标题(v3.5)

wmvff8tz  于 2022-11-23  发布在  Chart.js
关注(0)|答案(1)|浏览(168)

(**请注意:**v2有很多答案,这是v3的答案)
我正在尝试为圆环图设置工具提示labeltitle
编码:

//Create the donut chart
    donut = new Chart('questions_positivity_donut', {
        type: 'doughnut',
        data: { 
            labels: ["Positive", "Other"],
            datasets: [{
                label: 'Sentiment',
                data: [user_context.state.avg_joy, (1-user_context.state.avg_joy)],
                backgroundColor: ['#a9a9a9','#f2f2f2']
            }]
        },
        options: {
            cutout: "70%",
            plugins: {
                legend: {
                    display: false
                },
                maintainAspectRatio: false,
                responsive: true,
                tooltip: {
                    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.parsed.x;
                            return title;
                        } 
                    },
                    displayColors: false
                }                   
            }
        }
    });

label现在可以工作了,并显示数据的值,但是title返回空白,而不是返回数据的标签(“Positive”或“Other”)。
如何在tooltip.callback中返回正确的标题?
示例:“阳性35%”和“其他65%”

zrfyljdw

zrfyljdw1#

如果记录上下文,您可以看到它是一个包含对象的数组,在您使用的默认交互模式下,它只包含一个项目,因此您可以选择该项目,然后访问其上的label属性,如下所示:
第一个

相关问题