javascript - 如何使用图表 JS 修复双甜甜圈图中的工具提示位置问题？

Question

移动光标时，工具提示应随之移动，但位于固定位置。如何解决？

我正在使用图表 JS 绘制图表。在此示例中，我们为 2 个数据集创建一个双甜甜圈并将其呈现在我们的页面中。您可以看到所有使用 Chart.js 的方法。

JS 小提琴链接

    var config = {
     type: 'doughnut',
     data: {
     datasets: [
      /* Outer doughnut data starts*/
     {
       data: link_count,
       backgroundColor: [
         "rgb(87, 193, 123)", // red
         "rgb(111, 135, 216)", // green

        ],
       label: 'Link Status'
     },
     /* Outer doughnut data ends*/
     /* Inner doughnut data starts*/
     {
       data:proto_count,
        backgroundColor: [
         "rgb(87, 193, 123)", // red
         "rgb(111, 135, 216)", // green

        ],
       label: 'Protocol Status'
     }
     /* Inner doughnut data ends*/
     ],
     labels: label_keys
     },
     options: {
     responsive: true,
     legend: {
       position: 'top',
     },
     title: {
       display: true,
       text: 'INTERFACE STATUS'
     },
     animation: {
       animateScale: true,
       animateRotate: true
     },
     tooltips: {
         bodyFontSize: 16,
         titleFontSize : 20,
         bodyFontFamily : "Courier New",
          custom: function(tooltip) {
            if (!tooltip) return;
            // disable displaying the color box;
            tooltip.displayColors = false;
          },
       callbacks: {
         // label: function(item, data) {
         // console.log(data.labels, item);
             // return data.datasets[item.datasetIndex].label+ "</br> Status : "+ data.labels[item.index]+ "</n> Count : "+ data.datasets[item.datasetIndex].data[item.index];
         // }
          label: function(item, data) {
           var someValue = data.datasets[item.datasetIndex].label+ " : "+ data.labels[item.index];
           return someValue;
        },
        afterLabel: function(item, data) {
                var dataset = data.datasets[item.datasetIndex];
      var total = dataset.data.reduce(function(previousValue, currentValue, currentIndex, array) {
        return previousValue + currentValue;
      });
      var currentValue = dataset.data[item.index];
      var precentage = Math.floor(((currentValue/total) * 100)+0.5);  
           var someValue2 = "Count : "+ data.datasets[item.datasetIndex].data[item.index]+" ("+precentage+"%)";

           return someValue2;
        }
     }
     }
     }
     };

     var ctx = document.getElementById("myChart")
     .getContext("2d");
     window.myDoughnut = new Chart(ctx, config);

帮我找出问题并解决它..

先感谢您

标签： javascriptgraphchart.jspie-chart