utils.js 2.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117
  1. 'use strict';
  2. import Chart from 'chart.js';
  3. function createCanvas(w, h) {
  4. var canvas = document.createElement('CANVAS');
  5. canvas.width = w;
  6. canvas.height = h;
  7. return canvas;
  8. }
  9. function createImageData(w, h) {
  10. var canvas = createCanvas(w, h);
  11. var context = canvas.getContext('2d');
  12. return context.getImageData(0, 0, w, h);
  13. }
  14. function readImageData(url, callback) {
  15. var image = new Image();
  16. image.onload = function() {
  17. var h = image.height;
  18. var w = image.width;
  19. var canvas = createCanvas(w, h);
  20. var ctx = canvas.getContext('2d');
  21. ctx.drawImage(image, 0, 0, w, h);
  22. callback(ctx.getImageData(0, 0, w, h));
  23. };
  24. image.src = url;
  25. }
  26. function canvasFromImageData(data) {
  27. var canvas = createCanvas(data.width, data.height);
  28. var context = canvas.getContext('2d');
  29. context.putImageData(data, 0, 0);
  30. return canvas;
  31. }
  32. function acquireChart(config, options) {
  33. var wrapper = document.createElement('DIV');
  34. var canvas = document.createElement('CANVAS');
  35. var chart, key;
  36. config = config || {};
  37. options = options || {};
  38. options.canvas = options.canvas || {height: 512, width: 512};
  39. options.wrapper = options.wrapper || {class: 'chartjs-wrapper'};
  40. for (key in options.canvas) {
  41. if (options.canvas.hasOwnProperty(key)) {
  42. canvas.setAttribute(key, options.canvas[key]);
  43. }
  44. }
  45. for (key in options.wrapper) {
  46. if (options.wrapper.hasOwnProperty(key)) {
  47. wrapper.setAttribute(key, options.wrapper[key]);
  48. }
  49. }
  50. // by default, remove chart animation and auto resize
  51. config.options = config.options || {};
  52. config.options.animation = config.options.animation === undefined ? false : config.options.animation;
  53. config.options.responsive = config.options.responsive === undefined ? false : config.options.responsive;
  54. config.options.defaultFontFamily = config.options.defaultFontFamily || 'Arial';
  55. wrapper.appendChild(canvas);
  56. window.document.body.appendChild(wrapper);
  57. try {
  58. chart = new Chart(canvas.getContext('2d'), config);
  59. } catch (e) {
  60. window.document.body.removeChild(wrapper);
  61. throw e;
  62. }
  63. chart.$test = {
  64. persistent: options.persistent,
  65. wrapper: wrapper
  66. };
  67. return chart;
  68. }
  69. function releaseChart(chart) {
  70. chart.destroy();
  71. var wrapper = (chart.$test || {}).wrapper;
  72. if (wrapper && wrapper.parentNode) {
  73. wrapper.parentNode.removeChild(wrapper);
  74. }
  75. }
  76. function triggerMouseEvent(chart, type, el) {
  77. var node = chart.canvas;
  78. var rect = node.getBoundingClientRect();
  79. var event = new MouseEvent(type, {
  80. clientX: el ? rect.left + el._model.x : undefined,
  81. clientY: el ? rect.top + el._model.y : undefined,
  82. cancelable: true,
  83. bubbles: true,
  84. view: window
  85. });
  86. node.dispatchEvent(event);
  87. }
  88. export default {
  89. acquireChart: acquireChart,
  90. releaseChart: releaseChart,
  91. createCanvas: createCanvas,
  92. createImageData: createImageData,
  93. canvasFromImageData: canvasFromImageData,
  94. readImageData: readImageData,
  95. triggerMouseEvent: triggerMouseEvent
  96. };