Label.html 10 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>The source code</title>
  6. <link href="../resources/prettify/prettify.css" type="text/css" rel="stylesheet" />
  7. <script type="text/javascript" src="../resources/prettify/prettify.js"></script>
  8. <style type="text/css">
  9. .highlight { display: block; background-color: #ddd; }
  10. </style>
  11. <script type="text/javascript">
  12. function highlight() {
  13. document.getElementById(location.hash.replace(/#/, "")).className = "highlight";
  14. }
  15. </script>
  16. </head>
  17. <body onload="prettyPrint(); highlight();">
  18. <pre class="prettyprint lang-js"><span id='Ext-chart-Label'>/**
  19. </span> * @class Ext.chart.Label
  20. *
  21. * Labels is a mixin to the Series class. Labels methods are implemented
  22. * in each of the Series (Pie, Bar, etc) for label creation and placement.
  23. *
  24. * The methods implemented by the Series are:
  25. *
  26. * - **`onCreateLabel(storeItem, item, i, display)`** Called each time a new label is created.
  27. * The arguments of the method are:
  28. * - *`storeItem`* The element of the store that is related to the label sprite.
  29. * - *`item`* The item related to the label sprite. An item is an object containing the position of the shape
  30. * used to describe the visualization and also pointing to the actual shape (circle, rectangle, path, etc).
  31. * - *`i`* The index of the element created (i.e the first created label, second created label, etc)
  32. * - *`display`* The display type. May be &lt;b&gt;false&lt;/b&gt; if the label is hidden
  33. *
  34. * - **`onPlaceLabel(label, storeItem, item, i, display, animate)`** Called for updating the position of the label.
  35. * The arguments of the method are:
  36. * - *`label`* The sprite label.&lt;/li&gt;
  37. * - *`storeItem`* The element of the store that is related to the label sprite&lt;/li&gt;
  38. * - *`item`* The item related to the label sprite. An item is an object containing the position of the shape
  39. * used to describe the visualization and also pointing to the actual shape (circle, rectangle, path, etc).
  40. * - *`i`* The index of the element to be updated (i.e. whether it is the first, second, third from the labelGroup)
  41. * - *`display`* The display type. May be &lt;b&gt;false&lt;/b&gt; if the label is hidden.
  42. * - *`animate`* A boolean value to set or unset animations for the labels.
  43. */
  44. Ext.define('Ext.chart.Label', {
  45. /* Begin Definitions */
  46. requires: ['Ext.draw.Color'],
  47. /* End Definitions */
  48. <span id='Ext-chart-Label-cfg-label'> /**
  49. </span> * @cfg {Object} label
  50. * Object with the following properties:
  51. *
  52. * - **display** : String
  53. *
  54. * Specifies the presence and position of labels for each pie slice. Either &quot;rotate&quot;, &quot;middle&quot;, &quot;insideStart&quot;,
  55. * &quot;insideEnd&quot;, &quot;outside&quot;, &quot;over&quot;, &quot;under&quot;, or &quot;none&quot; to prevent label rendering.
  56. * Default value: 'none'.
  57. *
  58. * - **color** : String
  59. *
  60. * The color of the label text.
  61. * Default value: '#000' (black).
  62. *
  63. * - **contrast** : Boolean
  64. *
  65. * True to render the label in contrasting color with the backround.
  66. * Default value: false.
  67. *
  68. * - **field** : String
  69. *
  70. * The name of the field to be displayed in the label.
  71. * Default value: 'name'.
  72. *
  73. * - **minMargin** : Number
  74. *
  75. * Specifies the minimum distance from a label to the origin of the visualization.
  76. * This parameter is useful when using PieSeries width variable pie slice lengths.
  77. * Default value: 50.
  78. *
  79. * - **font** : String
  80. *
  81. * The font used for the labels.
  82. * Default value: &quot;11px Helvetica, sans-serif&quot;.
  83. *
  84. * - **orientation** : String
  85. *
  86. * Either &quot;horizontal&quot; or &quot;vertical&quot;.
  87. * Dafault value: &quot;horizontal&quot;.
  88. *
  89. * - **renderer** : Function
  90. *
  91. * Optional function for formatting the label into a displayable value.
  92. * Default value: function(v) { return v; }
  93. */
  94. // @private a regex to parse url type colors.
  95. colorStringRe: /url\s*\(\s*#([^\/)]+)\s*\)/,
  96. // @private the mixin constructor. Used internally by Series.
  97. constructor: function(config) {
  98. var me = this;
  99. me.label = Ext.applyIf(me.label || {},
  100. {
  101. display: &quot;none&quot;,
  102. color: &quot;#000&quot;,
  103. field: &quot;name&quot;,
  104. minMargin: 50,
  105. font: &quot;11px Helvetica, sans-serif&quot;,
  106. orientation: &quot;horizontal&quot;,
  107. renderer: function(v) {
  108. return v;
  109. }
  110. });
  111. if (me.label.display !== 'none') {
  112. me.labelsGroup = me.chart.surface.getGroup(me.seriesId + '-labels');
  113. }
  114. },
  115. // @private a method to render all labels in the labelGroup
  116. renderLabels: function() {
  117. var me = this,
  118. chart = me.chart,
  119. gradients = chart.gradients,
  120. items = me.items,
  121. animate = chart.animate,
  122. config = me.label,
  123. display = config.display,
  124. color = config.color,
  125. field = [].concat(config.field),
  126. group = me.labelsGroup,
  127. groupLength = (group || 0) &amp;&amp; group.length,
  128. store = me.chart.getChartStore(),
  129. len = store.getCount(),
  130. itemLength = (items || 0) &amp;&amp; items.length,
  131. ratio = itemLength / len,
  132. gradientsCount = (gradients || 0) &amp;&amp; gradients.length,
  133. Color = Ext.draw.Color,
  134. hides = [],
  135. gradient, i, count, groupIndex, index, j, k, colorStopTotal, colorStopIndex, colorStop, item, label,
  136. storeItem, sprite, spriteColor, spriteBrightness, labelColor, colorString;
  137. if (display == 'none') {
  138. return;
  139. }
  140. // no items displayed, hide all labels
  141. if(itemLength == 0){
  142. while(groupLength--) {
  143. hides.push(groupLength);
  144. }
  145. } else {
  146. for (i = 0, count = 0, groupIndex = 0; i &lt; len; i++) {
  147. index = 0;
  148. for (j = 0; j &lt; ratio; j++) {
  149. item = items[count];
  150. label = group.getAt(groupIndex);
  151. storeItem = store.getAt(i);
  152. //check the excludes
  153. while(this.__excludes &amp;&amp; this.__excludes[index]) {
  154. index++;
  155. }
  156. if (!item &amp;&amp; label) {
  157. label.hide(true);
  158. groupIndex++;
  159. }
  160. if (item &amp;&amp; field[j]) {
  161. if (!label) {
  162. label = me.onCreateLabel(storeItem, item, i, display, j, index);
  163. }
  164. me.onPlaceLabel(label, storeItem, item, i, display, animate, j, index);
  165. groupIndex++;
  166. //set contrast
  167. if (config.contrast &amp;&amp; item.sprite) {
  168. sprite = item.sprite;
  169. //set the color string to the color to be set.
  170. if (sprite._endStyle) {
  171. colorString = sprite._endStyle.fill;
  172. }
  173. else if (sprite._to) {
  174. colorString = sprite._to.fill;
  175. }
  176. else {
  177. colorString = sprite.attr.fill;
  178. }
  179. colorString = colorString || sprite.attr.fill;
  180. spriteColor = Color.fromString(colorString);
  181. //color wasn't parsed property maybe because it's a gradient id
  182. if (colorString &amp;&amp; !spriteColor) {
  183. colorString = colorString.match(me.colorStringRe)[1];
  184. for (k = 0; k &lt; gradientsCount; k++) {
  185. gradient = gradients[k];
  186. if (gradient.id == colorString) {
  187. //avg color stops
  188. colorStop = 0; colorStopTotal = 0;
  189. for (colorStopIndex in gradient.stops) {
  190. colorStop++;
  191. colorStopTotal += Color.fromString(gradient.stops[colorStopIndex].color).getGrayscale();
  192. }
  193. spriteBrightness = (colorStopTotal / colorStop) / 255;
  194. break;
  195. }
  196. }
  197. }
  198. else {
  199. spriteBrightness = spriteColor.getGrayscale() / 255;
  200. }
  201. if (label.isOutside) {
  202. spriteBrightness = 1;
  203. }
  204. labelColor = Color.fromString(label.attr.color || label.attr.fill).getHSL();
  205. labelColor[2] = spriteBrightness &gt; 0.5 ? 0.2 : 0.8;
  206. label.setAttributes({
  207. fill: String(Color.fromHSL.apply({}, labelColor))
  208. }, true);
  209. }
  210. }
  211. count++;
  212. index++;
  213. }
  214. }
  215. groupLength = group.length;
  216. while(groupLength &gt; groupIndex){
  217. hides.push(groupIndex);
  218. groupIndex++;
  219. }
  220. }
  221. me.hideLabels(hides);
  222. },
  223. hideLabels: function(hides){
  224. var labelsGroup = this.labelsGroup,
  225. hlen = !!hides &amp;&amp; hides.length;
  226. if (!labelsGroup) {
  227. return;
  228. }
  229. if (hlen === false) {
  230. hlen = labelsGroup.getCount();
  231. while (hlen--) {
  232. labelsGroup.getAt(hlen).hide(true);
  233. }
  234. } else {
  235. while(hlen--) {
  236. labelsGroup.getAt(hides[hlen]).hide(true);
  237. }
  238. }
  239. }
  240. });
  241. </pre>
  242. </body>
  243. </html>