图表js，甜甜圈图没有正确地呈现提示

Question

我有一个多层次的甜甜圈图，但是它没有正确的渲染--这是代码--问题是，在所有绿色的部分上，它说物体，在所有灰色的部分，我想要的解决方案是，在外环上，应该是产品，中间的物体，内部最里面的应该是材料，灰色区域应该只显示数字。下面是问题代码的小提琴：

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

        }
    });

Answer 1

使用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也是可能的，但我不知道如何改变结构，因为结构中有很多东西发生了变化。

Answer 2

我也遇到了同样的问题，花了很多时间，但最终起作用的是导入这些元素并初始化它们。

从“chart.js”导入{ ChartJS，ArcElement，工具提示，联想}；ChartJS.register(ArcElement，工具提示，图例)；

这些是帮助制作整个图表的元素。你不能跳过