mirror of
https://github.com/chartjs/Chart.js.git
synced 2026-03-06 16:26:52 +01:00
147 lines
4.4 KiB
HTML
147 lines
4.4 KiB
HTML
<!doctype html>
|
|
<html>
|
|
|
|
<head>
|
|
<title>Line Chart with Custom Tooltips</title>
|
|
<script src="../dist/Chart.bundle.js"></script>
|
|
<style>
|
|
canvas{
|
|
-moz-user-select: none;
|
|
-webkit-user-select: none;
|
|
-ms-user-select: none;
|
|
}
|
|
#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;
|
|
}
|
|
</style>
|
|
</head>
|
|
|
|
<body>
|
|
<div id="canvas-holder1" style="width:75%;">
|
|
<canvas id="chart"/>
|
|
</div>
|
|
<script>
|
|
Chart.defaults.global.pointHitDetectionRadius = 1;
|
|
|
|
var customTooltips = function(tooltip) {
|
|
// Tooltip Element
|
|
var tooltipEl = document.getElementById('chartjs-tooltip');
|
|
|
|
if (!tooltipEl) {
|
|
var div = document.createElement('div');
|
|
div.id = 'chartjs-tooltip';
|
|
document.body.appendChild(div);
|
|
tooltipEl = document.getElementById('chartjs-tooltip');
|
|
}
|
|
|
|
// Hide if no tooltip
|
|
if (tooltip.opacity === 0) {
|
|
tooltipEl.style.opacity = 0;
|
|
document.querySelector('.chartjs-wrap').style.cursor = 'default';
|
|
return;
|
|
}
|
|
|
|
this._chart.canvas.style.cursor = 'pointer';
|
|
|
|
// 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 joinBody(bodyItem) {
|
|
return [].concat(bodyItem.before, bodyItem.lines, bodyItem.after).join('\n')
|
|
}
|
|
|
|
// Set Text
|
|
if (tooltip.body) {
|
|
var innerHtml = [
|
|
(tooltip.beforeTitle || []).join('\n'),
|
|
(tooltip.title || []).join('\n'),
|
|
(tooltip.afterTitle || []).join('\n'),
|
|
(tooltip.beforeBody || []).join('\n'),
|
|
(tooltip.body || []).map(joinBody).join('\n'),
|
|
(tooltip.afterBody || []).join('\n'),
|
|
(tooltip.beforeFooter || []).join('\n'),
|
|
(tooltip.footer || []).join('\n'),
|
|
(tooltip.afterFooter || []).join('\n')
|
|
];
|
|
tooltipEl.innerHTML = innerHtml.join('\n');
|
|
}
|
|
|
|
// Find Y Location on page
|
|
var top = 0;
|
|
if (tooltip.yAlign) {
|
|
if (tooltip.yAlign == 'above') {
|
|
top = tooltip.caretY - tooltip.caretHeight - tooltip.caretPadding;
|
|
} else {
|
|
top = tooltip.caretY + tooltip.caretHeight + tooltip.caretPadding;
|
|
}
|
|
}
|
|
|
|
var position = this._chart.canvas.getBoundingClientRect();
|
|
|
|
// Display, position, and set styles for font
|
|
tooltipEl.style.opacity = 1;
|
|
tooltipEl.style.width = tooltip.width ? (tooltip.width + 'px') : 'auto';
|
|
tooltipEl.style.left = position.left + tooltip.caretX + 'px';
|
|
tooltipEl.style.top = position.top + top + '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 randomScalingFactor = function() {
|
|
return Math.round(Math.random() * 100);
|
|
};
|
|
var lineChartData = {
|
|
labels: ["January", "February", "March", "April", "May", "June", "July"],
|
|
datasets: [{
|
|
label: "My First dataset",
|
|
data: [randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor()]
|
|
}, {
|
|
label: "My Second dataset",
|
|
data: [randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor()]
|
|
}]
|
|
};
|
|
|
|
window.onload = function() {
|
|
var chartEl = document.getElementById("chart");
|
|
window.myLine = new Chart(chartEl, {
|
|
type: 'line',
|
|
data: lineChartData,
|
|
options: {
|
|
title:{
|
|
display:true,
|
|
text:'Chart.js Line Chart - Custom Tooltips'
|
|
},
|
|
tooltips: {
|
|
enabled: false,
|
|
custom: customTooltips
|
|
}
|
|
}
|
|
});
|
|
};
|
|
</script>
|
|
</body>
|
|
|
|
</html>
|