图表 js，圆环图未正确呈现 tooptips

如何解决图表 js，圆环图未正确呈现 tooptips

我有一个多级圆环图，但它没有正确呈现这里是代码问题是，鼠标悬停在所有绿色部分上它表示对象，在所有灰色部分上它表示产品，我想要的解决方案是，在外环上它应该说产品，在中间对象中，最里面应该是材料，灰色区域应该只是显示号码。这是问题的jsfiddle 代码：

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',{
                    label: 'Materials',data: [mp,100 - mp],backgroundColor: ['#5ca08e',hoverOffset: 4
                }
            ]
        },options: {
            //cutoutPercentage: 40,height: 200,width:200

        }
    });

解决方法

您可以使用 Chart.JS 2.7.2 相当简单地实现这一点。像这样将 labels 添加到每个数据集：

data: {
  labels: ['Existing','Non'],datasets: [
    {
      labels: ['Objects','Non-objects'],...
    },{
      labels: ['Products','Non-products'],{
      labels: ['Materials','Non-materials'],...
    }
  ]
}

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

tooltips: {
  callbacks: {
    label: function(tooltipItem,data) {
      var dataset = data.datasets[tooltipItem.datasetIndex];
      var index = tooltipItem.index;
      return dataset.labels[index] + ": " + dataset.data[index];
    }
  }
}

演示：https://jsfiddle.net/adelriosantiago/fxd6vops/3/

我相信 Chart.JS > 3.0 也是可能的，但我不知道如何因为结构中有很多变化。