190 行
6.5KB

  1. <!doctype html>
  2. <html>
  3. <head>
  4. <title>Line Chart</title>
  5. <script src="../dist/Chart.bundle.js"></script>
  6. <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
  7. <style>
  8. canvas {
  9. -moz-user-select: none;
  10. -webkit-user-select: none;
  11. -ms-user-select: none;
  12. }
  13. </style>
  14. </head>
  15. <body>
  16. <div style="width:75%;">
  17. <canvas id="canvas"></canvas>
  18. </div>
  19. <br>
  20. <br>
  21. <button id="randomizeData">Randomize Data</button>
  22. <button id="addDataset">Add Dataset</button>
  23. <button id="removeDataset">Remove Dataset</button>
  24. <button id="addData">Add Data</button>
  25. <button id="removeData">Remove Data</button>
  26. <script>
  27. var MONTHS = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
  28. var randomScalingFactor = function() {
  29. return Math.round(Math.random() * 100 * (Math.random() > 0.5 ? -1 : 1));
  30. };
  31. var randomColorFactor = function() {
  32. return Math.round(Math.random() * 255);
  33. };
  34. var randomColor = function(opacity) {
  35. return 'rgba(' + randomColorFactor() + ',' + randomColorFactor() + ',' + randomColorFactor() + ',' + (opacity || '.3') + ')';
  36. };
  37. var config = {
  38. type: 'line',
  39. data: {
  40. labels: ["January", "February", "March", "April", "May", "June", "July"],
  41. datasets: [{
  42. label: "My First dataset",
  43. data: [randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor()],
  44. fill: false,
  45. borderDash: [5, 5],
  46. }, {
  47. label: "My Second dataset",
  48. data: [randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor()],
  49. }]
  50. },
  51. options: {
  52. responsive: true,
  53. title:{
  54. display:true,
  55. text:"Chart.js Line Chart - Tooltip Hooks"
  56. },
  57. tooltips: {
  58. mode: 'label',
  59. callbacks: {
  60. beforeTitle: function() {
  61. return '...beforeTitle';
  62. },
  63. afterTitle: function() {
  64. return '...afterTitle';
  65. },
  66. beforeBody: function() {
  67. return '...beforeBody';
  68. },
  69. afterBody: function() {
  70. return '...afterBody';
  71. },
  72. beforeLabel: function() {
  73. return '...beforeLabel';
  74. },
  75. afterLabel: function() {
  76. return '...afterLabel';
  77. },
  78. beforeFooter: function() {
  79. return '...beforeFooter';
  80. },
  81. footer: function() {
  82. return 'Footer';
  83. },
  84. afterFooter: function() {
  85. return '...afterFooter';
  86. },
  87. }
  88. },
  89. hover: {
  90. mode: 'label'
  91. },
  92. scales: {
  93. xAxes: [{
  94. display: true,
  95. scaleLabel: {
  96. show: true,
  97. labelString: 'Month'
  98. }
  99. }],
  100. yAxes: [{
  101. display: true,
  102. scaleLabel: {
  103. show: true,
  104. labelString: 'Value'
  105. }
  106. }]
  107. }
  108. }
  109. };
  110. $.each(config.data.datasets, function(i, dataset) {
  111. dataset.borderColor = randomColor(0.4);
  112. dataset.backgroundColor = randomColor(0.5);
  113. dataset.pointBorderColor = randomColor(0.7);
  114. dataset.pointBackgroundColor = randomColor(0.5);
  115. dataset.pointBorderWidth = 1;
  116. });
  117. window.onload = function() {
  118. var ctx = document.getElementById("canvas").getContext("2d");
  119. window.myLine = new Chart(ctx, config);
  120. };
  121. $('#randomizeData').click(function() {
  122. $.each(config.data.datasets, function(i, dataset) {
  123. dataset.data = dataset.data.map(function() {
  124. return randomScalingFactor();
  125. });
  126. });
  127. window.myLine.update();
  128. });
  129. $('#addDataset').click(function() {
  130. var newDataset = {
  131. label: 'Dataset ' + config.data.datasets.length,
  132. borderColor: randomColor(0.4),
  133. backgroundColor: randomColor(0.5),
  134. pointBorderColor: randomColor(0.7),
  135. pointBackgroundColor: randomColor(0.5),
  136. pointBorderWidth: 1,
  137. data: [],
  138. };
  139. for (var index = 0; index < config.data.labels.length; ++index) {
  140. newDataset.data.push(randomScalingFactor());
  141. }
  142. config.data.datasets.push(newDataset);
  143. window.myLine.update();
  144. });
  145. $('#addData').click(function() {
  146. if (config.data.datasets.length > 0) {
  147. var month = MONTHS[config.data.labels.length % MONTHS.length];
  148. config.data.labels.push(month);
  149. $.each(config.data.datasets, function(i, dataset) {
  150. dataset.data.push(randomScalingFactor());
  151. });
  152. window.myLine.update();
  153. }
  154. });
  155. $('#removeDataset').click(function() {
  156. config.data.datasets.splice(0, 1);
  157. window.myLine.update();
  158. });
  159. $('#removeData').click(function() {
  160. config.data.labels.splice(-1, 1); // remove the label first
  161. config.data.datasets.forEach(function(dataset, datasetIndex) {
  162. dataset.data.pop();
  163. });
  164. window.myLine.update();
  165. });
  166. </script>
  167. </body>
  168. </html>