Columns.js 5.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179
  1. define("dojox/charting/plot2d/Columns", ["dojo/_base/lang", "dojo/_base/array", "dojo/_base/declare", "./Base", "./common",
  2. "dojox/lang/functional", "dojox/lang/functional/reversed", "dojox/lang/utils", "dojox/gfx/fx"],
  3. function(lang, arr, declare, Base, dc, df, dfr, du, fx){
  4. var purgeGroup = dfr.lambda("item.purgeGroup()");
  5. /*=====
  6. var Base = dojox.charting.plot2d.Base;
  7. =====*/
  8. return declare("dojox.charting.plot2d.Columns", Base, {
  9. // summary:
  10. // The plot object representing a column chart (vertical bars).
  11. defaultParams: {
  12. hAxis: "x", // use a horizontal axis named "x"
  13. vAxis: "y", // use a vertical axis named "y"
  14. gap: 0, // gap between columns in pixels
  15. animate: null, // animate bars into place
  16. enableCache: false
  17. },
  18. optionalParams: {
  19. minBarSize: 1, // minimal column width in pixels
  20. maxBarSize: 1, // maximal column width in pixels
  21. // theme component
  22. stroke: {},
  23. outline: {},
  24. shadow: {},
  25. fill: {},
  26. font: "",
  27. fontColor: ""
  28. },
  29. constructor: function(chart, kwArgs){
  30. // summary:
  31. // The constructor for a columns chart.
  32. // chart: dojox.charting.Chart
  33. // The chart this plot belongs to.
  34. // kwArgs: dojox.charting.plot2d.__BarCtorArgs?
  35. // An optional keyword arguments object to help define the plot.
  36. this.opt = lang.clone(this.defaultParams);
  37. du.updateWithObject(this.opt, kwArgs);
  38. du.updateWithPattern(this.opt, kwArgs, this.optionalParams);
  39. this.series = [];
  40. this.hAxis = this.opt.hAxis;
  41. this.vAxis = this.opt.vAxis;
  42. this.animate = this.opt.animate;
  43. },
  44. getSeriesStats: function(){
  45. // summary:
  46. // Calculate the min/max on all attached series in both directions.
  47. // returns: Object
  48. // {hmin, hmax, vmin, vmax} min/max in both directions.
  49. var stats = dc.collectSimpleStats(this.series);
  50. stats.hmin -= 0.5;
  51. stats.hmax += 0.5;
  52. return stats;
  53. },
  54. createRect: function(run, creator, params){
  55. var rect;
  56. if(this.opt.enableCache && run._rectFreePool.length > 0){
  57. rect = run._rectFreePool.pop();
  58. rect.setShape(params);
  59. // was cleared, add it back
  60. creator.add(rect);
  61. }else{
  62. rect = creator.createRect(params);
  63. }
  64. if(this.opt.enableCache){
  65. run._rectUsePool.push(rect);
  66. }
  67. return rect;
  68. },
  69. render: function(dim, offsets){
  70. // summary:
  71. // Run the calculations for any axes for this plot.
  72. // dim: Object
  73. // An object in the form of { width, height }
  74. // offsets: Object
  75. // An object of the form { l, r, t, b}.
  76. // returns: dojox.charting.plot2d.Columns
  77. // A reference to this plot for functional chaining.
  78. if(this.zoom && !this.isDataDirty()){
  79. return this.performZoom(dim, offsets);
  80. }
  81. var t = this.getSeriesStats();
  82. this.resetEvents();
  83. this.dirty = this.isDirty();
  84. if(this.dirty){
  85. arr.forEach(this.series, purgeGroup);
  86. this._eventSeries = {};
  87. this.cleanGroup();
  88. var s = this.group;
  89. df.forEachRev(this.series, function(item){ item.cleanGroup(s); });
  90. }
  91. var t = this.chart.theme, f, gap, width,
  92. ht = this._hScaler.scaler.getTransformerFromModel(this._hScaler),
  93. vt = this._vScaler.scaler.getTransformerFromModel(this._vScaler),
  94. baseline = Math.max(0, this._vScaler.bounds.lower),
  95. baselineHeight = vt(baseline),
  96. min = Math.max(0, Math.floor(this._hScaler.bounds.from - 1)), max = Math.ceil(this._hScaler.bounds.to),
  97. events = this.events();
  98. f = dc.calculateBarSize(this._hScaler.bounds.scale, this.opt);
  99. gap = f.gap;
  100. width = f.size;
  101. for(var i = this.series.length - 1; i >= 0; --i){
  102. var run = this.series[i];
  103. if(!this.dirty && !run.dirty){
  104. t.skip();
  105. this._reconnectEvents(run.name);
  106. continue;
  107. }
  108. run.cleanGroup();
  109. if(this.opt.enableCache){
  110. run._rectFreePool = (run._rectFreePool?run._rectFreePool:[]).concat(run._rectUsePool?run._rectUsePool:[]);
  111. run._rectUsePool = [];
  112. }
  113. var theme = t.next("column", [this.opt, run]), s = run.group,
  114. eventSeries = new Array(run.data.length);
  115. var l = Math.min(run.data.length, max);
  116. for(var j = min; j < l; ++j){
  117. var value = run.data[j];
  118. if(value !== null){
  119. var v = typeof value == "number" ? value : value.y,
  120. vv = vt(v),
  121. height = vv - baselineHeight,
  122. h = Math.abs(height),
  123. finalTheme = typeof value != "number" ?
  124. t.addMixin(theme, "column", value, true) :
  125. t.post(theme, "column");
  126. if(width >= 1 && h >= 0){
  127. var rect = {
  128. x: offsets.l + ht(j + 0.5) + gap,
  129. y: dim.height - offsets.b - (v > baseline ? vv : baselineHeight),
  130. width: width, height: h
  131. };
  132. var specialFill = this._plotFill(finalTheme.series.fill, dim, offsets);
  133. specialFill = this._shapeFill(specialFill, rect);
  134. var shape = this.createRect(run, s, rect).setFill(specialFill).setStroke(finalTheme.series.stroke);
  135. run.dyn.fill = shape.getFill();
  136. run.dyn.stroke = shape.getStroke();
  137. if(events){
  138. var o = {
  139. element: "column",
  140. index: j,
  141. run: run,
  142. shape: shape,
  143. x: j + 0.5,
  144. y: v
  145. };
  146. this._connectEvents(o);
  147. eventSeries[j] = o;
  148. }
  149. if(this.animate){
  150. this._animateColumn(shape, dim.height - offsets.b - baselineHeight, h);
  151. }
  152. }
  153. }
  154. }
  155. this._eventSeries[run.name] = eventSeries;
  156. run.dirty = false;
  157. }
  158. this.dirty = false;
  159. return this; // dojox.charting.plot2d.Columns
  160. },
  161. _animateColumn: function(shape, voffset, vsize){
  162. fx.animateTransform(lang.delegate({
  163. shape: shape,
  164. duration: 1200,
  165. transform: [
  166. {name: "translate", start: [0, voffset - (voffset/vsize)], end: [0, 0]},
  167. {name: "scale", start: [1, 1/vsize], end: [1, 1]},
  168. {name: "original"}
  169. ]
  170. }, this.animate)).play();
  171. }
  172. });
  173. });