sparkline.js 7.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210
  1. (function (root, factory) {
  2. if (typeof define === 'function' && define.amd) {
  3. // AMD. Register as an anonymous module.
  4. define(factory);
  5. } else if (typeof exports === 'object') {
  6. // Node. Does not work with strict CommonJS, but
  7. // only CommonJS-like enviroments that support module.exports,
  8. // like Node.
  9. module.exports = factory();
  10. } else {
  11. // Browser globals (root is window)
  12. root.Sparkline = factory();
  13. }
  14. }(window, function () {
  15. function extend(specific, general) {
  16. var obj = {};
  17. for (var key in general) {
  18. obj[key] = key in specific ? specific[key] : general[key];
  19. }
  20. return obj;
  21. }
  22. function Sparkline(element, options) {
  23. this.element = element;
  24. this.options = extend(options || {}, Sparkline.options);
  25. init: {
  26. this.element.innerHTML = "<canvas></canvas>";
  27. this.canvas = this.element.firstChild;
  28. this.context = this.canvas.getContext("2d");
  29. this.ratio = window.devicePixelRatio || 1;
  30. if (this.options.tooltip) {
  31. this.canvas.style.position = "relative";
  32. this.canvas.onmousemove = showTooltip.bind(this);
  33. }
  34. }
  35. }
  36. Sparkline.options = {
  37. width: 100,
  38. height: null,
  39. lineColor: "black",
  40. lineWidth: 1.5,
  41. startColor: "transparent",
  42. endColor: "black",
  43. maxColor: "transparent",
  44. minColor: "transparent",
  45. minValue: null,
  46. maxValue: null,
  47. minMaxValue: null,
  48. maxMinValue: null,
  49. dotRadius: 2.5,
  50. tooltip: null,
  51. fillBelow: true,
  52. fillLighten: 0.5,
  53. startLine: false,
  54. endLine: false,
  55. minLine: false,
  56. maxLine: false,
  57. bottomLine: false,
  58. topLine: false,
  59. averageLine: false
  60. };
  61. Sparkline.init = function (element, options) {
  62. return new Sparkline(element, options);
  63. };
  64. Sparkline.draw = function (element, points, options) {
  65. var sparkline = new Sparkline(element, options);
  66. sparkline.draw(points);
  67. return sparkline;
  68. }
  69. function getY(minValue, maxValue, offsetY, height, index) {
  70. var range = maxValue - minValue;
  71. if (range == 0) {
  72. return offsetY + height / 2;
  73. } else {
  74. return (offsetY + height) - ((this[index] - minValue) / range) * height;
  75. }
  76. }
  77. function drawDot(radius, x1, x2, color, line, x, y) {
  78. this.context.beginPath();
  79. this.context.fillStyle = color;
  80. this.context.arc(x, y, radius, 0, Math.PI * 2, false);
  81. this.context.fill();
  82. drawLine.call(this, x1, x2, line, x, y);
  83. }
  84. function drawLine(x1, x2, style, x, y){
  85. if(!style) return;
  86. this.context.save();
  87. this.context.strokeStyle = style.color || 'black';
  88. this.context.lineWidth = (style.width || 1) * this.ratio;
  89. this.context.globalAlpha = style.alpha || 1;
  90. this.context.beginPath();
  91. this.context.moveTo(style.direction != 'right' ? x1 : x, y);
  92. this.context.lineTo(style.direction != 'left' ? x2 : x, y);
  93. this.context.stroke();
  94. this.context.restore();
  95. }
  96. function showTooltip(e) {
  97. var x = e.offsetX || e.layerX || 0;
  98. var delta = ((this.options.width - this.options.dotRadius * 2) / (this.points.length - 1));
  99. var index = minmax(0, Math.round((x - this.options.dotRadius) / delta), this.points.length - 1);
  100. this.canvas.title = this.options.tooltip(this.points[index], index, this.points);
  101. }
  102. Sparkline.prototype.draw = function (points) {
  103. points = points || [];
  104. this.points = points;
  105. this.canvas.width = this.options.width * this.ratio;
  106. this.canvas.style.width = this.options.width + 'px';
  107. var pxHeight = this.options.height || this.element.offsetHeight;
  108. this.canvas.height = pxHeight * this.ratio;
  109. this.canvas.style.height = pxHeight + 'px';
  110. var lineWidth = this.options.lineWidth * this.ratio;
  111. var offsetX = Math.max(this.options.dotRadius * this.ratio, lineWidth/2);
  112. var offsetY = Math.max(this.options.dotRadius * this.ratio, lineWidth/2);
  113. var width = this.canvas.width - offsetX * 2;
  114. var height = this.canvas.height - offsetY * 2;
  115. var minValue = Math.min.apply(Math, points);
  116. var maxValue = Math.max.apply(Math, points);
  117. var bottomValue = this.options.minValue != undefined ? this.options.minValue : Math.min(minValue, this.options.maxMinValue != undefined ? this.options.maxMinValue : minValue);
  118. var topValue = this.options.maxValue != undefined ? this.options.maxValue : Math.max(maxValue, this.options.minMaxValue != undefined ? this.options.minMaxValue : maxValue);
  119. var minX = offsetX;
  120. var maxX = offsetX;
  121. var x = offsetX;
  122. var y = getY.bind(points, bottomValue, topValue, offsetY, height);
  123. var delta = width / (points.length - 1);
  124. var dot = drawDot.bind(this, this.options.dotRadius * this.ratio, offsetX, width + offsetX);
  125. var line = drawLine.bind(this, offsetX, width + offsetX);
  126. this.context.save();
  127. this.context.strokeStyle = this.options.lineColor;
  128. this.context.fillStyle = this.options.lineColor;
  129. this.context.lineWidth = lineWidth;
  130. this.context.lineCap = 'round';
  131. this.context.lineJoin = 'round';
  132. if(this.options.fillBelow && points.length > 1){
  133. this.context.save();
  134. this.context.beginPath();
  135. this.context.moveTo(x, y(0));
  136. for (var i = 1; i < points.length; i++) {
  137. x += delta;
  138. minX = points[i] == minValue ? x : minX;
  139. maxX = points[i] == maxValue ? x : maxX;
  140. this.context.lineTo(x, y(i));
  141. }
  142. this.context.lineTo(width+offsetX, height + offsetY + lineWidth/2);
  143. this.context.lineTo(offsetX, height + offsetY + lineWidth/2);
  144. this.context.fill();
  145. if(this.options.fillLighten > 0){
  146. this.context.fillStyle = 'white';
  147. this.context.globalAlpha = this.options.fillLighten;
  148. this.context.fill();
  149. this.context.globalAlpha = 1;
  150. }else if(this.options.fillLighten < 0){
  151. this.context.fillStyle = 'black';
  152. this.context.globalAlpha = -this.options.fillLighten;
  153. this.context.fill();
  154. }
  155. this.context.restore();
  156. }
  157. x = offsetX;
  158. this.context.beginPath();
  159. this.context.moveTo(x, y(0));
  160. for (var i = 1; i < points.length; i++) {
  161. x += delta;
  162. this.context.lineTo(x, y(i));
  163. }
  164. this.context.stroke();
  165. this.context.restore();
  166. line(this.options.bottomLine, 0, offsetY);
  167. line(this.options.topLine, 0, height + offsetY+lineWidth/2);
  168. dot(this.options.startColor, this.options.startLine, offsetX + (points.length == 1 ? width / 2 : 0), y(0));
  169. dot(this.options.endColor, this.options.endLine, offsetX + (points.length == 1 ? width / 2 : width), y(points.length-1));
  170. dot(this.options.minColor, this.options.minLine, minX + (points.length == 1 ? width / 2 : 0), y(points.indexOf(minValue)));
  171. dot(this.options.maxColor, this.options.maxLine, maxX + (points.length == 1 ? width / 2 : 0), y(points.indexOf(maxValue)));
  172. //line(this.options.averageLine, )
  173. }
  174. function minmax(a, b, c) {
  175. return Math.max(a, Math.min(b, c));
  176. }
  177. return Sparkline;
  178. }));