custom-pie.html 3.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146
  1. <!doctype html>
  2. <html>
  3. <head>
  4. <title>Pie Chart with Custom Tooltips</title>
  5. <script src="../../dist/Chart.bundle.js"></script>
  6. <script src="../utils.js"></script>
  7. <style>
  8. #canvas-holder {
  9. width: 100%;
  10. margin-top: 50px;
  11. text-align: center;
  12. }
  13. #chartjs-tooltip {
  14. opacity: 1;
  15. position: absolute;
  16. background: rgba(0, 0, 0, .7);
  17. color: white;
  18. border-radius: 3px;
  19. -webkit-transition: all .1s ease;
  20. transition: all .1s ease;
  21. pointer-events: none;
  22. -webkit-transform: translate(-50%, 0);
  23. transform: translate(-50%, 0);
  24. }
  25. .chartjs-tooltip-key {
  26. display: inline-block;
  27. width: 10px;
  28. height: 10px;
  29. margin-right: 10px;
  30. }
  31. </style>
  32. </head>
  33. <body>
  34. <div id="canvas-holder" style="width: 300px;">
  35. <canvas id="chart-area" width="300" height="300"></canvas>
  36. <div id="chartjs-tooltip">
  37. <table></table>
  38. </div>
  39. </div>
  40. <script>
  41. Chart.defaults.global.tooltips.custom = function(tooltip) {
  42. // Tooltip Element
  43. var tooltipEl = document.getElementById('chartjs-tooltip');
  44. // Hide if no tooltip
  45. if (tooltip.opacity === 0) {
  46. tooltipEl.style.opacity = 0;
  47. return;
  48. }
  49. // Set caret Position
  50. tooltipEl.classList.remove('above', 'below', 'no-transform');
  51. if (tooltip.yAlign) {
  52. tooltipEl.classList.add(tooltip.yAlign);
  53. } else {
  54. tooltipEl.classList.add('no-transform');
  55. }
  56. function getBody(bodyItem) {
  57. return bodyItem.lines;
  58. }
  59. // Set Text
  60. if (tooltip.body) {
  61. var titleLines = tooltip.title || [];
  62. var bodyLines = tooltip.body.map(getBody);
  63. var innerHtml = '<thead>';
  64. titleLines.forEach(function(title) {
  65. innerHtml += '<tr><th>' + title + '</th></tr>';
  66. });
  67. innerHtml += '</thead><tbody>';
  68. bodyLines.forEach(function(body, i) {
  69. var colors = tooltip.labelColors[i];
  70. var style = 'background:' + colors.backgroundColor;
  71. style += '; border-color:' + colors.borderColor;
  72. style += '; border-width: 2px';
  73. var span = '<span class="chartjs-tooltip-key" style="' + style + '"></span>';
  74. innerHtml += '<tr><td>' + span + body + '</td></tr>';
  75. });
  76. innerHtml += '</tbody>';
  77. var tableRoot = tooltipEl.querySelector('table');
  78. tableRoot.innerHTML = innerHtml;
  79. }
  80. var positionY = this._chart.canvas.offsetTop;
  81. var positionX = this._chart.canvas.offsetLeft;
  82. // Display, position, and set styles for font
  83. tooltipEl.style.opacity = 1;
  84. tooltipEl.style.left = positionX + tooltip.caretX + 'px';
  85. tooltipEl.style.top = positionY + tooltip.caretY + 'px';
  86. tooltipEl.style.fontFamily = tooltip._bodyFontFamily;
  87. tooltipEl.style.fontSize = tooltip.bodyFontSize;
  88. tooltipEl.style.fontStyle = tooltip._bodyFontStyle;
  89. tooltipEl.style.padding = tooltip.yPadding + 'px ' + tooltip.xPadding + 'px';
  90. };
  91. var config = {
  92. type: 'pie',
  93. data: {
  94. datasets: [{
  95. data: [300, 50, 100, 40, 10],
  96. backgroundColor: [
  97. window.chartColors.red,
  98. window.chartColors.orange,
  99. window.chartColors.yellow,
  100. window.chartColors.green,
  101. window.chartColors.blue,
  102. ],
  103. }],
  104. labels: [
  105. 'Red',
  106. 'Orange',
  107. 'Yellow',
  108. 'Green',
  109. 'Blue'
  110. ]
  111. },
  112. options: {
  113. responsive: true,
  114. legend: {
  115. display: false
  116. },
  117. tooltips: {
  118. enabled: false,
  119. }
  120. }
  121. };
  122. window.onload = function() {
  123. var ctx = document.getElementById('chart-area').getContext('2d');
  124. window.myPie = new Chart(ctx, config);
  125. };
  126. </script>
  127. </body>
  128. </html>