123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146 |
- <!doctype html>
- <html>
- <head>
- <title>Pie Chart with Custom Tooltips</title>
- <script src="../../dist/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._bodyFontFamily;
- tooltipEl.style.fontSize = tooltip.bodyFontSize;
- tooltipEl.style.fontStyle = tooltip._bodyFontStyle;
- 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>
|