J'ai créé un graphique en anneau en utilisant Chart.js 2.5. Le problème que j'ai est avec l'info-bulle. Lorsque je survole le graphique, une info-bulle s'affiche avec un curseur qui reste toujours à gauche ou à droite, comme ceci:
Je veux changer la position du curseur pour qu’elle apparaisse toujours en bas. Est-ce possible?
Voici mon code de carte
var myChart = new Chart(ctx, {
type: 'doughnut',
data: {
labels: ['Jan', 'Feb', 'Mar'],
datasets: [{
label: 'dataset',
data: [30, 50, 20],
backgroundColor: [
'rgb(153, 102, 255)',
'rgb(255, 205, 86)',
'rgb(54, 162, 235)'
],
}],
}
})
Vous pouvez définir la propriété yAlign
sur bottom
pour les info-bulles dans les options de votre graphique afin d'afficher les info-bulles 's caret toujours en position inférieure ...
options: {
tooltips: {
yAlign: 'bottom'
}
}
var ctx = document.getElementById("chart").getContext("2d");
var myChart = new Chart(ctx, {
type: 'doughnut',
data: {
labels: ['Jan', 'Feb', 'Mar'],
datasets: [{
label: 'dataset',
data: [30, 50, 20],
backgroundColor: ['rgb(153, 102, 255)', 'rgb(255, 205, 86)', 'rgb(54, 162, 235)']
}]
},
options: {
responsive: false,
tooltips: {
yAlign: 'bottom'
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js"></script>
<canvas id="chart" height="180"></canvas>
Vous pouvez le faire en définissant l'option yAlign
tooltips sur "bottom":
options: {
tooltips: {
yAlign: "bottom"
}
}
JSFiddle Demo: https://jsfiddle.net/tksr7bn9/
Beaucoup de façons de personnaliser l'info-bulle. Voici un bon exemple via CodePen.
https://codepen.io/mab213/pen/PZOXdE
customTooltips: function(tooltip) {
// Tooltip Element
var tooltipEl = $('#chartjs-tooltip');
// Hide if no tooltip
if (!tooltip) {
tooltipEl.css({
opacity: 1
});
return;
}
// Set caret Position
tooltipEl.removeClass('above below');
tooltipEl.addClass(tooltip.yAlign);
tooltipEl.addClass(tooltip.xAlign);
// Set Text
tooltipEl.html(tooltip.text);
// Find Y Location on page
var top;
if (tooltip.yAlign == 'above') {
top = tooltip.y - tooltip.caretHeight - tooltip.caretPadding;
} else {
top = tooltip.y + tooltip.caretHeight + tooltip.caretPadding;
}
// Display, position, and set styles for font
tooltipEl.css({
opacity: 1,
left: tooltip.chart.canvas.offsetLeft + tooltip.x + 'px',
top: tooltip.chart.canvas.offsetTop + top + 'px',
fontFamily: tooltip.fontFamily,
fontSize: tooltip.fontSize,
fontStyle: tooltip.fontStyle,
xOffset: tooltip.xOffset,
});
}