Je dois changer le modèle d'info-bulle Chart.js, de sorte que seule la partie valeur soit affichée en gras. Il existe une option tooltipTemplate, qui devrait faire exactement cela. La valeur par défaut de cette option est:
tooltipTemplate: "<%if (label){%><%=label%>: <%}%><%= value %>%"
J'ai essayé de le modifier comme ceci:
tooltipTemplate: "<%if (label){%><%=label%>: <%}%><strong><%= value %></strong>%"
Mais il affiche les balises strong
à l'écran dans le cadre du texte, au lieu de rendre le texte en gras. J'ai essayé de les déplacer autour de <%
et %>
, mais cela ne fonctionne toujours pas. Des idées?
Le modèle ne reconnaît pas le HTML. Vous devez utiliser l'option customTooltips. Ci-dessous, un exemple adapté (mais non optimisé) de https://github.com/nnnick/Chart.js/blob/master/samples/line-customTooltips.html
HTML
<canvas id="myChart" width="400" height="200"></canvas>
<div id="chartjs-tooltip"></div>
CSS
#chartjs-tooltip {
opacity: 0;
position: absolute;
background: rgba(0, 0, 0, .7);
color: white;
padding: 3px;
border-radius: 3px;
-webkit-transition: all .1s ease;
transition: all .1s ease;
pointer-events: none;
-webkit-transform: translate(-50%, 0);
transform: translate(-50%, 0);
}
JS
var ctx = $("#myChart").get(0).getContext("2d");
var data = {
labels: ["January", "February", "March", "April", "May", "June", "July"],
datasets: [{
label: "My First dataset",
fillColor: "rgba(220,220,220,0.2)",
strokeColor: "rgba(220,220,220,1)",
pointColor: "rgba(220,220,220,1)",
pointStrokeColor: "#fff",
pointHighlightFill: "#fff",
pointHighlightStroke: "rgba(220,220,220,1)",
data: [65, 59, 80, 81, 56, 55, 40]
}]
};
var myLineChart = new Chart(ctx).Line(data, {
customTooltips: function (tooltip) {
var tooltipEl = $('#chartjs-tooltip');
if (!tooltip) {
tooltipEl.css({
opacity: 0
});
return;
}
tooltipEl.removeClass('above below');
tooltipEl.addClass(tooltip.yAlign);
// split out the label and value and make your own tooltip here
var parts = tooltip.text.split(":");
var innerHtml = '<span>' + parts[0].trim() + '</span> : <span><b>' + parts[1].trim() + '</b></span>';
tooltipEl.html(innerHtml);
tooltipEl.css({
opacity: 1,
left: tooltip.chart.canvas.offsetLeft + tooltip.x + 'px',
top: tooltip.chart.canvas.offsetTop + tooltip.y + 'px',
fontFamily: tooltip.fontFamily,
fontSize: tooltip.fontSize,
fontStyle: tooltip.fontStyle,
});
}
});
Fiddle - http://jsfiddle.net/6rxdo0c0/1/
J'ai une réponse à jour en utilisant les info-bulles jquery et bootstrap 4 qui créent les div de l'info-bulle de manière dynamique . Supposons que votre code HTML est
<canvas id="myPieChart" width="100" height="55"></canvas>
Alors utilisez ce script:
<script>
$(document).ready(function() {
let canvas = $("#donutChart")[0];
let ctx = canvas.getContext("2d");
let donutChart = new Chart(ctx, {
type: 'doughnut',
data: data,
options: {
tooltips: {
callbacks: {
title: function(){
return null;
},
label: function(tooltipItem, data) {
var multiline = ['First Line', 'second line'];
return multiline;
},
},
enabled: false, // the builtin tooltips cannot extend beyond the canvas
custom: function(tooltip) {
var tooltipEl = $('#chartjs-tooltip');
if(tooltipEl.length == 0) { // if not exists, create it
tooltipEl = $('<div class="tooltip fade" id="chartjs-tooltip"></div>').appendTo('body');
}
if ( !tooltip.body ) { // Hide if no tooltip
tooltipEl.remove();
return;
}
tooltipEl.removeClass('bs-tooltip-top bs-tooltip-bottom');
tooltipEl.addClass( 'bs-tooltip-' + (tooltip.yAlign == "bottom" ? "top" : "bottom") ); // different naming in bootstrap
var innerHtml = '<div class="arrow" style="left: '+tooltip.caretX+'px;"></div>'
+ '<div class="tooltip-inner" style="max-width: none;">' + tooltip.body[0].join('<br>')
+ '</div>';
tooltipEl.html( innerHtml );
tooltipEl.css( {
opacity: 1,
left: $("#donutChart").offset().left + tooltip.x + 'px',
top: $("#donutChart").offset().top + tooltip.y + 'px'
} );
},
},
hover: {
mode: null,
},
}
});
});
</script>