Charts.js - ツールチップからデータ値を削除する必要があります

Question

ツールチップからデータ値を削除する必要があります（ 'Varde 7：50'の番号、 '50'を削除しようとしています）。トンの方法を試しても、まだそれを把握することはできません。これは私が現在持っているコードです。それは私が必要とする円グラフからリンクする方法を含んでいます。

1）ツールチップの説明からデータ値を削除する必要があります。データ値のないラベルだけです。 2）円グラフの各セグメントを外部URLにリンクする必要があります。

FYI - スニペットが私のサイトではうまく動作しますが、エディタではうまく動作しません。ページ下部の作業バージョンをご覧ください：http://soccer.virnative.com/soccer/player-development-model

助けてください！それはcallback

そうだとあなたはこのを追加ラベルのテキストを表示したい場合は、ツールチップのラベルを制御することができ chart.js - link to other page when click on specific section in chart

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

： オリジナルコードから来ました〜にあなたのoptions：

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

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" 
 
     }, 
 
     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 ... 
 
    } 
 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.1/Chart.min.js"></script> 
 
<canvas id="pieChart" width="400" height="400"></canvas>