Chart.JS 2.0 tooltipTemplate nasıl kullanılır

Question

Çörek çizelgesini birden çok veri kümesiyle kullanmaya çalışıyorum ve ayrıca ipuçlarını araç ipuçlarının içinde özelleştirmek için tooltipTemplate özelliğini kullanıyorum ama hiçbir şey işe yaramıyor. Bu, önceki Grafik js sürümünde çalıştı, ancak bu çoklu veri kümelerini desteklemiyor. Biri yardım edebilir mi? Aşağıda potatopeelings olarak

options: { 
    tooltips: { 
     tooltipTemplate: "<%if (label){%><%=value%><%} else {%> No data <%}%>", 
    }, 
} 

Answer 1

yorum olarak bahsedilen etti kodum .., sen ipucu için bir geri arama belirlemek zorunda. İşte

bir örnek:

options: { 
    tooltips: { 
    callbacks: { 
     label: function(tooltipItem, data) { 
     var datasetLabel = data.datasets[tooltipItem.datasetIndex].label || 'Other'; 
     var label = data.labels[tooltipItem.index]; 
     return datasetLabel + ': ' + label; 
     } 
    } 
    } 
} 

canlı demo

var ctx = document.getElementById("myChart"); 
 
var myChart = new Chart(ctx, { 
 
    type: 'doughnut', 
 
    data: { 
 
     labels: ["Men", "Women", "Unknown"], 
 
     datasets: [{ 
 
      label: 'Sweden', 
 
      data: [60, 40, 20], 
 
      backgroundColor: ['rgba(158, 216, 202, 0.75)', 'rgba(255, 150, 162, 0.75)', 'rgba(160, 160, 160, 0.75)'] 
 
     }, { 
 
      label: 'Netherlands', 
 
      data: [40, 70, 10], 
 
      backgroundColor: ['rgba(158, 216, 202, 0.5)', 'rgba(255, 150, 162, 0.5)', 'rgba(160, 160, 160, 0.5)'] 
 
     }, { 
 
      data: [33, 33, 34], 
 
      backgroundColor: ['rgba(158, 216, 202, 0.25)', 'rgba(255, 150, 162, 0.25)', 'rgba(160, 160, 160, 0.25)'] 
 
     }] 
 
    }, 
 
    options: { 
 
     tooltips: { 
 
      callbacks: { 
 
       label: function(tooltipItem, data) { 
 
        var datasetLabel = data.datasets[tooltipItem.datasetIndex].label || 'Other'; 
 
        var label = data.labels[tooltipItem.index]; 
 
        return datasetLabel + ': ' + label; 
 
       } 
 
      } 
 
     } 
 
    } 
 
});

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

Answer 2

Chart.js 1.x tooltipsTemplate Chart.js 2.x options.tooltips.callbacks.title eşdeğerdir :

var ctx = document.getElementById("myChart"); 
 

 
var myChart = new Chart(ctx, { 
 
    type: 'doughnut', 
 
    data: { 
 
    labels: [ 
 
     "Men", 
 
     "Women", 
 
     "Unknown" 
 
    ], 
 
    datasets: [{ 
 
     label: 'Sweden', 
 
     data: [60, 40, 20], 
 
     backgroundColor: [ 
 
     'rgba(158, 216, 202, 0.75)', 
 
     'rgba(255, 150, 162, 0.75)', 
 
     'rgba(160, 160, 160, 0.75)' 
 
     ] 
 
    }, { 
 
     label: 'Netherlands', 
 
     data: [40, 70, 10], 
 
     backgroundColor: [ 
 
     'rgba(158, 216, 202, 0.5)', 
 
     'rgba(255, 150, 162, 0.5)', 
 
     'rgba(160, 160, 160, 0.5)' 
 
     ] 
 
    }, { 
 
     data: [33, 33, 34], 
 
     backgroundColor: [ 
 
     'rgba(158, 216, 202, 0.25)', 
 
     'rgba(255, 150, 162, 0.25)', 
 
     'rgba(160, 160, 160, 0.25)' 
 
     ] 
 
    }] 
 
    }, 
 
    options: { 
 
    tooltips: { 
 
     callbacks: { 
 
     label: function(tooltipItem, data) { 
 
       return 'This value ' + tooltipItem.yLabel; 
 
     }, 
 
     title: function(tooltipItem, data) { 
 
      return 'The tooltip title ' + tooltipItem[0].xLabel; 
 
     } 
 
     } 
 
    } 
 
    } 
 
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.1.2/Chart.min.js"></script> 
 

 
<canvas id="myChart" width="400" height="200"></canvas>

Answer 3

Sen `callbacks.label` kullanmak zorunda birden ipucunu

options: { 
    tooltips: { 
     mode : 'label' 
    } 
}