Javascript 图表js，油炸圈饼图表未正确呈现tooptips

我有一个多级油炸圈饼图，但它没有正确呈现这里是代码 问题是，在所有绿色部分上面都写着物体，在所有灰色部分上面写着产品，我想要的解决方案是，在外环上应该写产品，在中间的物体，最里面的应该是材料，灰色区域应该只显示数字。下面是问题的一个简单例子 代码：

---

使用Chart.JS 2.7.2可以相当简单地实现这一点。向每个数据集添加

标签，如下所示：

数据：{
标签：[“现有”、“非”]，
数据集：[
{
标签：[“对象”、“非对象”]，
...
}, {
标签：[“产品”、“非产品”]，
...
},
{
标签：[“材料”、“非材料”]，
...
}
]
}

并添加以下标签工具提示回调：

工具提示：{
回调：{
标签：函数（工具提示项、数据）{
var dataset=data.datasets[tooltipItem.datasetIndex]；
var index=工具提示项索引；
返回dataset.labels[index]+“：“+dataset.data[index]；
}
}
}

演示：

我相信Chart.JS>3.0也可以，但我不知道是怎么回事，因为结构中有很多东西发生了变化。
你是一个救生员，你能添加一个点击功能吗，它只显示点击了哪个环这是一个不同的设置，称为
事件
。默认情况下，
[“鼠标移动”、“touchstart”、“touchmove”、“单击”]
，您可以将其设置为
[“单击”]
，以便仅单击触发工具提示。演示：
var op=93;
var ap=99;
var mp=66;
 var ctx = new Chart(myChart, {
        type: 'doughnut',

        data: {
            labels: ['Objects', 'Products', 'Materials'],
            datasets: [{
                label: 'Objects',
                data: [op, 100 - op],
                backgroundColor: ['#006a4e','#eeeeee'],
                hoverOffset: 4
            },{
                label: 'Products',
                data: [ap, 100 - ap],
                backgroundColor: ['#2e856e', '#eeeeee'],
                hoverOffset: 4
            },
                {
                    label: 'Materials',
                    data: [mp, 100 - mp],
                    backgroundColor: ['#5ca08e', '#eeeeee'],
                    hoverOffset: 4
                }
            ]
        },
        options: {
            //cutoutPercentage: 40,
            height: 200,
            width:200

        }
    });