chartjs，圆环图无法正确呈现工具提示

Question

我有一个多级圆环图，但它没有正确呈现这里是代码问题是，鼠标悬停在所有绿色部分上它说物体，在所有灰色部分上它说产品，我想要的解决方案是，在外环上它应该说产品，在中间物体上，最里面应该是材料，灰色区域应该只是显示号码。这是一个 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', '#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, 工具提示, 图例);

这些是有助于制作整个图表的元素。你不能跳过它们

chartjs，圆环图无法正确呈现工具提示

charts js, doughnut chart not rendering tooptips correctly

javascript

charts

chart.js

graph-visualization