Charts.js-需要从工具提示中删除数据值

Question

需要从工具提示中删除数据值（“ Varde 7：50”中的数字，我试图删除“ 50”）。尝试了很多方法，但还不能弄清楚。这是我目前拥有的代码。它包括从我需要的饼图中链接出来的方法。

1）需要从工具提示描述中删除数据值。因此，只是标签没有数据值。2）需要饼图的每个部分都链接到外部URL。

仅供参考-由于某些原因，该代码段可以在我的网站上正常运行，但不能在编辑器中运行？请参阅页面底部的工作版本：http : //soccer.virnative.com/soccer/player-development-model

请帮忙！原始代码来自： chart.js-单击图表中的特定部分时链接到其他页面

var canvasP = document.getElementById("pieChart");
var ctxP = canvasP.getContext('2d');
var myPieChart = new Chart(ctxP, {
   type: 'pie',
   data: {
      labels: ["Värde 1", "Värde 2", "Värde 3", "Värde 4", "Värde 5", "Värde 6", "Värde 7"],
      datasets: [{
         data: [1, 5, 10, 20, 50, 70, 50],
         backgroundColor: ["#64B5F6", "#FFD54F", "#2196F3", "#FFC107", "#1976D2", "#FFA000", "#0D47A1"],
         hoverBackgroundColor: ["#B2EBF2", "#FFCCBC", "#4DD0E1", "#FF8A65", "#00BCD4", "#FF5722", "#0097A7"]
      }]
   },
   options: {
      legend: {
         display: true,
         position: "right"
      }
   }
});

canvasP.onclick = function(e) {
   var slice = myPieChart.getElementAtEvent(e);
   if (!slice.length) return; // return if not clicked on slice
   var label = slice[0]._model.label;
   switch (label) {
      // add case for each label/slice
      case 'Värde 5':
         alert('clicked on slice 5');
         window.open('www.example.com/foo');
         break;
      case 'Värde 6':
         alert('clicked on slice 6');
         window.open('www.example.com/bar');
         break;
      // add rests ...
   }
}

<canvas id="pieChart" width="400" height="400"></canvas>

Answer 1

You can control the label of the tooltip with it's callback.

If you just want to display the text of the label add this to your options:

tooltips: {
    callbacks: {
        label: function(tooltipItems, data) {  
            return data.labels[tooltipItems.index];
        }
    }
}

By the way: Your snippet is not working because you didn't include chart.js. I've copied your snippet and added my change below:

tooltips: {
    callbacks: {
        label: function(tooltipItems, data) {  
            return data.labels[tooltipItems.index];
        }
    }
}

var canvasP = document.getElementById("pieChart");
var ctxP = canvasP.getContext('2d');
var myPieChart = new Chart(ctxP, {
   type: 'pie',
   data: {
      labels: ["Värde 1", "Värde 2", "Värde 3", "Värde 4", "Värde 5", "Värde 6", "Värde 7"],
      datasets: [{
         data: [1, 5, 10, 20, 50, 70, 50],
         backgroundColor: ["#64B5F6", "#FFD54F", "#2196F3", "#FFC107", "#1976D2", "#FFA000", "#0D47A1"],
         hoverBackgroundColor: ["#B2EBF2", "#FFCCBC", "#4DD0E1", "#FF8A65", "#00BCD4", "#FF5722", "#0097A7"]
      }]
   },
   options: {
      legend: {
         display: true,
         position: "right"
      },
      tooltips: {
        callbacks: {
          label: function(tooltipItems, data) {  
            return data.labels[tooltipItems.index];
          }
        }
      }
   }
});

canvasP.onclick = function(e) {
   var slice = myPieChart.getElementAtEvent(e);
   if (!slice.length) return; // return if not clicked on slice
   var label = slice[0]._model.label;
   switch (label) {
      // add case for each label/slice
      case 'Värde 5':
         alert('clicked on slice 5');
         window.open('www.example.com/foo');
         break;
      case 'Värde 6':
         alert('clicked on slice 6');
         window.open('www.example.com/bar');
         break;
      // add rests ...
   }
}