Question

我正在尝试创建一个甜甜圈图，一个在另一个里面，我可以完成这项工作，但是我无法使工具提示显示每个圆环的单个元素。

我已经尝试了很多来自堆栈和在线的代码示例，并且可以制作甜甜圈，但是我对JS还是有点陌生，无法理解我在哪里弄错了tootip函数。我想知道构建多面体的多个数据集的构建是否存在根本性的错误。我可以实现一个tootip，它可以显示外圈的所有三个标签，以及内圈的所有三个标签，但是我想将鼠标悬停在单个元素上并获取该元素的标签，而同一环上没有其他标签。下面的代码来自我在这里找到的示例，但是我不清楚为什么工具提示不起作用。

new Chart(document.getElementById("doughnut-chart"), {
    type: 'doughnut',
    data: {
    datasets: [
     /* Outer doughnut data starts*/
        {
        data: [10,20,30],
        labels: ['one', 'two', 'three'],
        backgroundColor: [
            "rgb(255, 0, 0)", // red
            "rgb(0, 255, 0)", // green
            "rgb(0, 0, 255)", //blue
        ],
        label: 'Doughnut 1'
        },
    /* Outer doughnut data ends*/
    /* Inner doughnut data starts*/
    {
      data: [45,25,11],
      labels: ['four', 'five', 'six'],
      backgroundColor: [
        "rgb(255, 0, 0)", // red
        "rgb(0, 255, 0)", // green
        "rgb(0, 0, 255)", //blue
      ],
      label: 'Doughnut 2'
    }
    /* Inner doughnut data ends*/
    ],
    labels: [
      "Info 1",
      "Info 2",
      "Info 3"
    ]
  },
    options: {
        tooltips: {
            shared: false,
            callbacks: {
                label: function(tooltipItem, data) {
                    var label = data.datasets[tooltipItem.datasetIndex].labels || '';
            return label;
                }
            }
        }
    }
});

运行此代码时，当我将鼠标悬停在外圈上的任何地方时，我看到一条工具提示，该提示提示三行：一二三。当我将鼠标悬停在内圈上时，会得到一个提示：“四五六”。我想将外环悬停在数据点“ 10”上，并让工具提示说“一个” ...指向数据点“ 20”，并说“两个”，依此类推。任何指导将不胜感激。谢谢。

嵌套Chartjs甜甜圈的编码Tootips标签

0 个答案: