jqplot.canvasAxisTickRenderer.js 9.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253
  1. /**
  2. * jqPlot
  3. * Pure JavaScript plotting plugin using jQuery
  4. *
  5. * Version: @VERSION
  6. * Revision: @REVISION
  7. *
  8. * Copyright (c) 2009-2013 Chris Leonello
  9. * jqPlot is currently available for use in all personal or commercial projects
  10. * under both the MIT (http://www.opensource.org/licenses/mit-license.php) and GPL
  11. * version 2.0 (http://www.gnu.org/licenses/gpl-2.0.html) licenses. This means that you can
  12. * choose the license that best suits your project and use it accordingly.
  13. *
  14. * Although not required, the author would appreciate an email letting him
  15. * know of any substantial use of jqPlot. You can reach the author at:
  16. * chris at jqplot dot com or see http://www.jqplot.com/info.php .
  17. *
  18. * If you are feeling kind and generous, consider supporting the project by
  19. * making a donation at: http://www.jqplot.com/donate.php .
  20. *
  21. * sprintf functions contained in jqplot.sprintf.js by Ash Searle:
  22. *
  23. * version 2007.04.27
  24. * author Ash Searle
  25. * http://hexmen.com/blog/2007/03/printf-sprintf/
  26. * http://hexmen.com/js/sprintf.js
  27. * The author (Ash Searle) has placed this code in the public domain:
  28. * "This code is unrestricted: you are free to use it however you like."
  29. *
  30. */
  31. (function($) {
  32. /**
  33. * Class: $.jqplot.CanvasAxisTickRenderer
  34. * Renderer to draw axis ticks with a canvas element to support advanced
  35. * featrues such as rotated text. This renderer uses a separate rendering engine
  36. * to draw the text on the canvas. Two modes of rendering the text are available.
  37. * If the browser has native font support for canvas fonts (currently Mozila 3.5
  38. * and Safari 4), you can enable text rendering with the canvas fillText method.
  39. * You do so by setting the "enableFontSupport" option to true.
  40. *
  41. * Browsers lacking native font support will have the text drawn on the canvas
  42. * using the Hershey font metrics. Even if the "enableFontSupport" option is true
  43. * non-supporting browsers will still render with the Hershey font.
  44. */
  45. $.jqplot.CanvasAxisTickRenderer = function(options) {
  46. // Group: Properties
  47. // prop: mark
  48. // tick mark on the axis. One of 'inside', 'outside', 'cross', '' or null.
  49. this.mark = 'outside';
  50. // prop: showMark
  51. // whether or not to show the mark on the axis.
  52. this.showMark = true;
  53. // prop: showGridline
  54. // whether or not to draw the gridline on the grid at this tick.
  55. this.showGridline = true;
  56. // prop: isMinorTick
  57. // if this is a minor tick.
  58. this.isMinorTick = false;
  59. // prop: angle
  60. // angle of text, measured clockwise from x axis.
  61. this.angle = 0;
  62. // prop: markSize
  63. // Length of the tick marks in pixels. For 'cross' style, length
  64. // will be stoked above and below axis, so total length will be twice this.
  65. this.markSize = 4;
  66. // prop: show
  67. // whether or not to show the tick (mark and label).
  68. this.show = true;
  69. // prop: showLabel
  70. // whether or not to show the label.
  71. this.showLabel = true;
  72. // prop: labelPosition
  73. // 'auto', 'start', 'middle' or 'end'.
  74. // Whether tick label should be positioned so the start, middle, or end
  75. // of the tick mark.
  76. this.labelPosition = 'auto';
  77. this.label = '';
  78. this.value = null;
  79. this._styles = {};
  80. // prop: formatter
  81. // A class of a formatter for the tick text.
  82. // The default $.jqplot.DefaultTickFormatter uses sprintf.
  83. this.formatter = $.jqplot.DefaultTickFormatter;
  84. // prop: formatString
  85. // string passed to the formatter.
  86. this.formatString = '';
  87. // prop: prefix
  88. // String to prepend to the tick label.
  89. // Prefix is prepended to the formatted tick label.
  90. this.prefix = '';
  91. // prop: fontFamily
  92. // css spec for the font-family css attribute.
  93. this.fontFamily = '"Trebuchet MS", Arial, Helvetica, sans-serif';
  94. // prop: fontSize
  95. // CSS spec for font size.
  96. this.fontSize = '10pt';
  97. // prop: fontWeight
  98. // CSS spec for fontWeight
  99. this.fontWeight = 'normal';
  100. // prop: fontStretch
  101. // Multiplier to condense or expand font width.
  102. // Applies only to browsers which don't support canvas native font rendering.
  103. this.fontStretch = 1.0;
  104. // prop: textColor
  105. // css spec for the color attribute.
  106. this.textColor = '#666666';
  107. // prop: enableFontSupport
  108. // true to turn on native canvas font support in Mozilla 3.5+ and Safari 4+.
  109. // If true, tick label will be drawn with canvas tag native support for fonts.
  110. // If false, tick label will be drawn with Hershey font metrics.
  111. this.enableFontSupport = true;
  112. // prop: pt2px
  113. // Point to pixel scaling factor, used for computing height of bounding box
  114. // around a label. The labels text renderer has a default setting of 1.4, which
  115. // should be suitable for most fonts. Leave as null to use default. If tops of
  116. // letters appear clipped, increase this. If bounding box seems too big, decrease.
  117. // This is an issue only with the native font renderering capabilities of Mozilla
  118. // 3.5 and Safari 4 since they do not provide a method to determine the font height.
  119. this.pt2px = null;
  120. this._elem;
  121. this._ctx;
  122. this._plotWidth;
  123. this._plotHeight;
  124. this._plotDimensions = {height:null, width:null};
  125. $.extend(true, this, options);
  126. var ropts = {fontSize:this.fontSize, fontWeight:this.fontWeight, fontStretch:this.fontStretch, fillStyle:this.textColor, angle:this.getAngleRad(), fontFamily:this.fontFamily};
  127. if (this.pt2px) {
  128. ropts.pt2px = this.pt2px;
  129. }
  130. if (this.enableFontSupport) {
  131. if ($.jqplot.support_canvas_text()) {
  132. this._textRenderer = new $.jqplot.CanvasFontRenderer(ropts);
  133. }
  134. else {
  135. this._textRenderer = new $.jqplot.CanvasTextRenderer(ropts);
  136. }
  137. }
  138. else {
  139. this._textRenderer = new $.jqplot.CanvasTextRenderer(ropts);
  140. }
  141. };
  142. $.jqplot.CanvasAxisTickRenderer.prototype.init = function(options) {
  143. $.extend(true, this, options);
  144. this._textRenderer.init({fontSize:this.fontSize, fontWeight:this.fontWeight, fontStretch:this.fontStretch, fillStyle:this.textColor, angle:this.getAngleRad(), fontFamily:this.fontFamily});
  145. };
  146. // return width along the x axis
  147. // will check first to see if an element exists.
  148. // if not, will return the computed text box width.
  149. $.jqplot.CanvasAxisTickRenderer.prototype.getWidth = function(ctx) {
  150. if (this._elem) {
  151. return this._elem.outerWidth(true);
  152. }
  153. else {
  154. var tr = this._textRenderer;
  155. var l = tr.getWidth(ctx);
  156. var h = tr.getHeight(ctx);
  157. var w = Math.abs(Math.sin(tr.angle)*h) + Math.abs(Math.cos(tr.angle)*l);
  158. return w;
  159. }
  160. };
  161. // return height along the y axis.
  162. $.jqplot.CanvasAxisTickRenderer.prototype.getHeight = function(ctx) {
  163. if (this._elem) {
  164. return this._elem.outerHeight(true);
  165. }
  166. else {
  167. var tr = this._textRenderer;
  168. var l = tr.getWidth(ctx);
  169. var h = tr.getHeight(ctx);
  170. var w = Math.abs(Math.cos(tr.angle)*h) + Math.abs(Math.sin(tr.angle)*l);
  171. return w;
  172. }
  173. };
  174. // return top.
  175. $.jqplot.CanvasAxisTickRenderer.prototype.getTop = function(ctx) {
  176. if (this._elem) {
  177. return this._elem.position().top;
  178. }
  179. else {
  180. return null;
  181. }
  182. };
  183. $.jqplot.CanvasAxisTickRenderer.prototype.getAngleRad = function() {
  184. var a = this.angle * Math.PI/180;
  185. return a;
  186. };
  187. $.jqplot.CanvasAxisTickRenderer.prototype.setTick = function(value, axisName, isMinor) {
  188. this.value = value;
  189. if (isMinor) {
  190. this.isMinorTick = true;
  191. }
  192. return this;
  193. };
  194. $.jqplot.CanvasAxisTickRenderer.prototype.draw = function(ctx, plot) {
  195. if (!this.label) {
  196. this.label = this.prefix + this.formatter(this.formatString, this.value);
  197. }
  198. // Memory Leaks patch
  199. if (this._elem) {
  200. if ($.jqplot.use_excanvas && window.G_vmlCanvasManager.uninitElement !== undefined) {
  201. window.G_vmlCanvasManager.uninitElement(this._elem.get(0));
  202. }
  203. this._elem.emptyForce();
  204. this._elem = null;
  205. }
  206. // create a canvas here, but can't draw on it untill it is appended
  207. // to dom for IE compatability.
  208. var elem = plot.canvasManager.getCanvas();
  209. this._textRenderer.setText(this.label, ctx);
  210. var w = this.getWidth(ctx);
  211. var h = this.getHeight(ctx);
  212. // canvases seem to need to have width and heigh attributes directly set.
  213. elem.width = w;
  214. elem.height = h;
  215. elem.style.width = w;
  216. elem.style.height = h;
  217. elem.style.textAlign = 'left';
  218. elem.style.position = 'absolute';
  219. elem = plot.canvasManager.initCanvas(elem);
  220. this._elem = $(elem);
  221. this._elem.css(this._styles);
  222. this._elem.addClass('jqplot-'+this.axis+'-tick');
  223. elem = null;
  224. return this._elem;
  225. };
  226. $.jqplot.CanvasAxisTickRenderer.prototype.pack = function() {
  227. this._textRenderer.draw(this._elem.get(0).getContext("2d"), this.label);
  228. };
  229. })(jQuery);