如何使用图表JS解决双甜甜圈图中的工具提示位置问题?

时间:2018-07-16 05:55:05

标签: javascript graph chart.js pie-chart

在移动光标工具提示时,它应随其一起移动,但其位置应固定。如何解决?

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

JS FIDDLE LINK

enter image description here

    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);

帮我找出问题并解决。.

提前谢谢

0 个答案:

没有答案