So verwenden Sie das TooltipTemplate auf Chart.JS 2.0

Question

Ich versuche, das Donut-Diagramm mit mehreren Datasets zu verwenden und die TooltipTemplate-Funktion zu verwenden, um den Test in den QuickInfos anzupassen, aber nichts funktioniert. Dies funktionierte in der vorherigen Chart js-Version, unterstützt jedoch nicht mehrere Datasets. Kann jemand helfen? Unten ist mein Code ..

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

Answer 1

Wie potatopeelings in den Kommentaren erwähnt, haben Sie für den Tooltip einen Rückruf zu setzen. Hier

ein Beispiel:

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

Live-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

Die Chart.js 1.x tooltipsTemplate entspricht options.tooltips.callbacks.title in Chart.js 2.x :

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

Sie haben options für Tooltip setzen mode-label für mehrere Tooltip zeigt

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