bubble.html 3.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156
  1. <!DOCTYPE html>
  2. <html lang="en-US">
  3. <head>
  4. <meta charset="utf-8">
  5. <meta http-equiv="X-UA-Compatible" content="IE=Edge">
  6. <meta name="viewport" content="width=device-width, initial-scale=1">
  7. <link rel="stylesheet" type="text/css" href="../style.css">
  8. <link rel="icon" type="image/ico" href="../favicon.ico">
  9. <script src="https://cdn.jsdelivr.net/npm/chart.js@2.7.0/dist/Chart.min.js"></script>
  10. <script src="../../dist/chartjs-plugin-datalabels.js"></script>
  11. <script src="../utils.js"></script>
  12. </head>
  13. <body>
  14. <div id="side">
  15. <div id="header"></div>
  16. <div id="actions">
  17. <button onclick="randomize(this)">Randomize</button>
  18. <button onclick="addData(this)">Add Data</button>
  19. <button onclick="removeData(this)">Remove Data</button>
  20. </div>
  21. </div>
  22. <div id="charts">
  23. <div class="wrapper"><canvas id="chart-0"></canvas></div>
  24. </div>
  25. <script>
  26. var SAMPLE_INFO = {
  27. group: 'Charts',
  28. name: 'Line',
  29. };
  30. </script>
  31. <script id="script-init">
  32. var DATA_COUNT = 8;
  33. var labels = [];
  34. Samples.srand(18);
  35. function generatePoint() {
  36. return {
  37. x: Samples.rand(-100, 100),
  38. y: Samples.rand(-50, 50),
  39. v: Samples.rand(15, 100),
  40. };
  41. }
  42. function generateData() {
  43. var data = [];
  44. for (var i = 0; i < DATA_COUNT; ++i) {
  45. data.push(generatePoint());
  46. }
  47. return data;
  48. }
  49. Chart.helpers.merge(Chart.defaults.global, {
  50. aspectRatio: 1,
  51. tooltips: false,
  52. layout: {
  53. padding: {
  54. top: 42,
  55. right: 16,
  56. bottom: 32,
  57. left: 8
  58. }
  59. },
  60. elements: {
  61. point: {
  62. radius: function(context) {
  63. var value = context.dataset.data[context.dataIndex];
  64. var size = context.chart.width;
  65. var base = Math.abs(value.v) / 100;
  66. return (size / 24) * base;
  67. }
  68. }
  69. },
  70. plugins: {
  71. legend: false,
  72. title: false
  73. }
  74. });
  75. </script>
  76. <script id="script-construct">
  77. var chart = new Chart('chart-0', {
  78. type: 'bubble',
  79. data: {
  80. datasets: [{
  81. backgroundColor: Samples.color(0),
  82. borderColor: Samples.color(0),
  83. data: generateData()
  84. }, {
  85. backgroundColor: Samples.color(1),
  86. borderColor: Samples.color(1),
  87. data: generateData()
  88. }]
  89. },
  90. options: {
  91. plugins: {
  92. datalabels: {
  93. anchor: function(context) {
  94. var value = context.dataset.data[context.dataIndex];
  95. return value.v < 50 ? 'end' : 'center';
  96. },
  97. align: function(context) {
  98. var value = context.dataset.data[context.dataIndex];
  99. return value.v < 50 ? 'end' : 'center';
  100. },
  101. color: function(context) {
  102. var value = context.dataset.data[context.dataIndex];
  103. return value.v < 50 ? context.dataset.backgroundColor : 'white';
  104. },
  105. font: {
  106. weight: 'bold'
  107. },
  108. formatter: function(value) {
  109. return Math.round(value.v);
  110. },
  111. offset: 2,
  112. padding: 0
  113. }
  114. }
  115. }
  116. });
  117. </script>
  118. <script id="script-actions">
  119. function randomize() {
  120. chart.data.datasets.forEach(function(dataset, i) {
  121. dataset.backgroundColor = dataset.borderColor = Samples.color();
  122. dataset.data = generateData();
  123. });
  124. chart.update();
  125. }
  126. function addData() {
  127. chart.data.labels.push(chart.data.labels.length);
  128. chart.data.datasets.forEach(function(dataset, i) {
  129. dataset.data.push(generatePoint());
  130. });
  131. chart.update();
  132. }
  133. function removeData() {
  134. chart.data.labels.shift();
  135. chart.data.datasets.forEach(function(dataset, i) {
  136. dataset.data.shift();
  137. });
  138. chart.update();
  139. }
  140. </script>
  141. </body>
  142. </html>