146 lines
3.3 KiB
HTML
146 lines
3.3 KiB
HTML
<!doctype html>
|
|
<html>
|
|
|
|
<head>
|
|
<title>Pie Chart with Custom Tooltips</title>
|
|
<script src="../../Chart.bundle.js"></script>
|
|
<script src="../utils.js"></script>
|
|
|
|
<style>
|
|
#canvas-holder {
|
|
width: 100%;
|
|
margin-top: 50px;
|
|
text-align: center;
|
|
}
|
|
#chartjs-tooltip {
|
|
opacity: 1;
|
|
position: absolute;
|
|
background: rgba(0, 0, 0, .7);
|
|
color: white;
|
|
border-radius: 3px;
|
|
-webkit-transition: all .1s ease;
|
|
transition: all .1s ease;
|
|
pointer-events: none;
|
|
-webkit-transform: translate(-50%, 0);
|
|
transform: translate(-50%, 0);
|
|
}
|
|
|
|
.chartjs-tooltip-key {
|
|
display: inline-block;
|
|
width: 10px;
|
|
height: 10px;
|
|
margin-right: 10px;
|
|
}
|
|
</style>
|
|
</head>
|
|
|
|
<body>
|
|
<div id="canvas-holder" style="width: 300px;">
|
|
<canvas id="chart-area" width="300" height="300"></canvas>
|
|
<div id="chartjs-tooltip">
|
|
<table></table>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
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.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 titleLines = tooltip.title || [];
|
|
var bodyLines = tooltip.body.map(getBody);
|
|
|
|
var innerHtml = '<thead>';
|
|
|
|
titleLines.forEach(function(title) {
|
|
innerHtml += '<tr><th>' + title + '</th></tr>';
|
|
});
|
|
innerHtml += '</thead><tbody>';
|
|
|
|
bodyLines.forEach(function(body, i) {
|
|
var colors = tooltip.labelColors[i];
|
|
var style = 'background:' + colors.backgroundColor;
|
|
style += '; border-color:' + colors.borderColor;
|
|
style += '; border-width: 2px';
|
|
var span = '<span class="chartjs-tooltip-key" style="' + style + '"></span>';
|
|
innerHtml += '<tr><td>' + span + body + '</td></tr>';
|
|
});
|
|
innerHtml += '</tbody>';
|
|
|
|
var tableRoot = tooltipEl.querySelector('table');
|
|
tableRoot.innerHTML = innerHtml;
|
|
}
|
|
|
|
var positionY = this._chart.canvas.offsetTop;
|
|
var positionX = this._chart.canvas.offsetLeft;
|
|
|
|
// Display, position, and set styles for font
|
|
tooltipEl.style.opacity = 1;
|
|
tooltipEl.style.left = positionX + tooltip.caretX + 'px';
|
|
tooltipEl.style.top = positionY + tooltip.caretY + 'px';
|
|
tooltipEl.style.fontFamily = tooltip._fontFamily;
|
|
tooltipEl.style.fontSize = tooltip.fontSize;
|
|
tooltipEl.style.fontStyle = tooltip._fontStyle;
|
|
tooltipEl.style.padding = tooltip.yPadding + 'px ' + tooltip.xPadding + 'px';
|
|
};
|
|
|
|
var config = {
|
|
type: 'pie',
|
|
data: {
|
|
datasets: [{
|
|
data: [300, 50, 100, 40, 10],
|
|
backgroundColor: [
|
|
window.chartColors.red,
|
|
window.chartColors.orange,
|
|
window.chartColors.yellow,
|
|
window.chartColors.green,
|
|
window.chartColors.blue,
|
|
],
|
|
}],
|
|
labels: [
|
|
"Red",
|
|
"Orange",
|
|
"Yellow",
|
|
"Green",
|
|
"Blue"
|
|
]
|
|
},
|
|
options: {
|
|
responsive: true,
|
|
legend: {
|
|
display: false
|
|
},
|
|
tooltips: {
|
|
enabled: false,
|
|
}
|
|
}
|
|
};
|
|
|
|
window.onload = function() {
|
|
var ctx = document.getElementById("chart-area").getContext("2d");
|
|
window.myPie = new Chart(ctx, config);
|
|
};
|
|
</script>
|
|
</body>
|
|
|
|
</html>
|