Я использую Chart.js v2.4.0 и работаю с кольцевыми диаграммами. Из-за требований проекта я должен показать данные в центре пончиков. Когда я навожу курсор на кольцевую диаграмму, появляется всплывающая подсказка, которая идет под центральными метками.
На приведенном выше снимке экрана показана проблема, с которой я столкнулся.
Кольцевая диаграмма без всплывающей подсказки похожа на скриншот выше.
У меня был такой же случай, как у вас, поэтому вот мой код, вы можете изменить его, как вам нужно. Базовая структура полностью работает. Пример здесь - https://codepen.io/BiDbMAK/pen/zmKZyY
(function ($, window, document, undefined) {
'use strict';
function sumOfDataVal(dataArray) {
return dataArray['datasets'][0]['data'].reduce(function (sum, value) {
return sum + value;
}, 0);
}
var dataResponse = {
datasets: [{
data: [10, 20, 30, 55, 75],
backgroundColor: [
'#2b92d8',
'#2ab96a',
'#e9c061',
'#d95d6b',
'#9173d8'
],
borderColor: '#25272f',
borderWidth: 3,
hoverBackgroundColor: [
'#2b92d8',
'#2ab96a',
'#e9c061',
'#d95d6b',
'#9173d8'
],
hoverBorderColor: '#25272f',
hoverBorderWidth: 3
}],
// These labels appear in the legend and in the tooltips when hovering different arcs
labels: [
'Blue',
'Green',
'Yellow',
'Red',
'Violet'
]
};
Chart.defaults.global.tooltips.custom = function (tooltip) {
// Tooltip Element
var tooltipEl = document.getElementById('chartjs-tooltip');
// Hide if no tooltip
if (tooltip.opacity === 0) {
tooltipEl.style.color = "#464950";
$("#chartjs-tooltip div p").text("100%");
tooltipEl.style.opacity = 0;
return;
}
// Set caret Position
tooltipEl.classList.remove('above', 'below', 'no-transform');
if (tooltip.yAlign) {
tooltipEl.classList.add(tooltip.yAlign);
} else {
tooltipEl.classList.add('no-transform');
}
function getBody(bodyItem) {
return bodyItem.lines;
}
// Set Text
if (tooltip.body) {
var bodyLines = tooltip.body.map(getBody);
var innerHtml = '<p>';
bodyLines.forEach(function (body, i) {
var dataNumber = body[i].split(":");
var dataValNum = parseInt(dataNumber[1].trim());
var dataToPercent = (dataValNum / sumOfDataVal(dataResponse) * 100).toFixed(2) + '%';
innerHtml += dataToPercent;
});
innerHtml += '</p>';
var tableRoot = tooltipEl.querySelector('div');
tableRoot.innerHTML = innerHtml;
}
tooltipEl.style.opacity = 1;
tooltipEl.style.color = "#FFF";
};
var ctx = document.getElementById('myChart').getContext('2d');
var myDoughnutChart = new Chart(ctx, {
type: 'doughnut',
data: dataResponse,
options: {
legend: {
display: false
},
cutoutPercentage: 73,
circumference: 2 * Math.PI,
maintainAspectRatio: false,
animation: {
animateRotate: false,
animateScale: true
},
tooltips: {
enabled: false
}
}
});
})(jQuery, window, document);body {
background: #25272f;
}
body .chart-wrapper {
max-height: 250px;
position: relative;
margin-top: 50px;
}
body .chart-wrapper #myChart {
position: relative;
z-index: 10;
}
body .chart-wrapper #chartjs-tooltip {
left: 0;
top: 0;
font-family: Arial, sans-serif;
font-style: normal;
right: 0;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
position: absolute;
z-index: 0;
height: 100%;
padding: 0;
opacity: 1 !important;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
color: gray;
font-size: 40px !important;
font-weight: 800 !important;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
<div class="chart-wrapper">
<canvas id="myChart" width="250" height="250"></canvas> <div id="chartjs-tooltip">
<div><p>100%</p></div>
</div>
</div>
</body>
