docs/source/Label2.html

   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="../prettify/prettify.css" type="text/css" rel="stylesheet" />
   7   <script type="text/javascript" src="../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 whose methods are appended onto the Series class. Labels is an interface with methods implemented
  22  * in each of the Series (Pie, Bar, etc) for label creation and label 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
  46     /* Begin Definitions */
  47
  48     requires: ['Ext.draw.Color'],
  49
  50     /* End Definitions */
  51
  52 <span id='Ext-chart-Label-cfg-display'>    /**
  53 </span>     * @cfg {String} display
  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
  59 <span id='Ext-chart-Label-cfg-color'>    /**
  60 </span>     * @cfg {String} color
  61      * The color of the label text.
  62      * Default value: '#000' (black).
  63      */
  64
  65 <span id='Ext-chart-Label-cfg-field'>    /**
  66 </span>     * @cfg {String} field
  67      * The name of the field to be displayed in the label.
  68      * Default value: 'name'.
  69      */
  70
  71 <span id='Ext-chart-Label-cfg-minMargin'>    /**
  72 </span>     * @cfg {Number} minMargin
  73      * Specifies the minimum distance from a label to the origin of the visualization.
  74      * This parameter is useful when using PieSeries width variable pie slice lengths.
  75      * Default value: 50.
  76      */
  77
  78 <span id='Ext-chart-Label-cfg-font'>    /**
  79 </span>     * @cfg {String} font
  80      * The font used for the labels.
  81      * Defautl value: &quot;11px Helvetica, sans-serif&quot;.
  82      */
  83
  84 <span id='Ext-chart-Label-cfg-orientation'>    /**
  85 </span>     * @cfg {String} orientation
  86      * Either &quot;horizontal&quot; or &quot;vertical&quot;.
  87      * Dafault value: &quot;horizontal&quot;.
  88      */
  89
  90 <span id='Ext-chart-Label-cfg-renderer'>    /**
  91 </span>     * @cfg {Function} renderer
  92      * Optional function for formatting the label into a displayable value.
  93      * Default value: function(v) { return v; }
  94      * @param v
  95      */
  96
  97     //@private a regex to parse url type colors.
  98     colorStringRe: /url\s*\(\s*#([^\/)]+)\s*\)/,
  99
 100     //@private the mixin constructor. Used internally by Series.
 101     constructor: function(config) {
 102         var me = this;
 103         me.label = Ext.applyIf(me.label || {},
 104         {
 105             display: &quot;none&quot;,
 106             color: &quot;#000&quot;,
 107             field: &quot;name&quot;,
 108             minMargin: 50,
 109             font: &quot;11px Helvetica, sans-serif&quot;,
 110             orientation: &quot;horizontal&quot;,
 111             renderer: function(v) {
 112                 return v;
 113             }
 114         });
 115
 116         if (me.label.display !== 'none') {
 117             me.labelsGroup = me.chart.surface.getGroup(me.seriesId + '-labels');
 118         }
 119     },
 120
 121     //@private a method to render all labels in the labelGroup
 122     renderLabels: function() {
 123         var me = this,
 124             chart = me.chart,
 125             gradients = chart.gradients,
 126             gradient,
 127             items = me.items,
 128             animate = chart.animate,
 129             config = me.label,
 130             display = config.display,
 131             color = config.color,
 132             field = [].concat(config.field),
 133             group = me.labelsGroup,
 134             store = me.chart.store,
 135             len = store.getCount(),
 136             ratio = items.length / len,
 137             i, count, index, j,
 138             k, gradientsCount = (gradients || 0) &amp;&amp; gradients.length,
 139             colorStopTotal, colorStopIndex, colorStop,
 140             item, label, storeItem,
 141             sprite, spriteColor, spriteBrightness, labelColor,
 142             Color = Ext.draw.Color,
 143             colorString;
 144
 145         if (display == 'none') {
 146             return;
 147         }
 148
 149         for (i = 0, count = 0; i &lt; len; i++) {
 150             index = 0;
 151             for (j = 0; j &lt; ratio; j++) {
 152                 item = items[count];
 153                 label = group.getAt(count);
 154                 storeItem = store.getAt(i);
 155
 156                 //check the excludes
 157                 while(this.__excludes &amp;&amp; this.__excludes[index]) {
 158                     index++;
 159                 }
 160
 161                 if (!item &amp;&amp; label) {
 162                     label.hide(true);
 163                 }
 164
 165                 if (item &amp;&amp; field[j]) {
 166                     if (!label) {
 167                         label = me.onCreateLabel(storeItem, item, i, display, j, index);
 168                     }
 169                     me.onPlaceLabel(label, storeItem, item, i, display, animate, j, index);
 170
 171                     //set contrast
 172                     if (config.contrast &amp;&amp; item.sprite) {
 173                         sprite = item.sprite;
 174                         colorString = sprite._to &amp;&amp; sprite._to.fill || sprite.attr.fill;
 175                         spriteColor = Color.fromString(colorString);
 176                         //color wasn't parsed property maybe because it's a gradient id
 177                         if (colorString &amp;&amp; !spriteColor) {
 178                             colorString = colorString.match(me.colorStringRe)[1];
 179                             for (k = 0; k &lt; gradientsCount; k++) {
 180                                 gradient = gradients[k];
 181                                 if (gradient.id == colorString) {
 182                                     //avg color stops
 183                                     colorStop = 0; colorStopTotal = 0;
 184                                     for (colorStopIndex in gradient.stops) {
 185                                         colorStop++;
 186                                         colorStopTotal += Color.fromString(gradient.stops[colorStopIndex].color).getGrayscale();
 187                                     }
 188                                     spriteBrightness = (colorStopTotal / colorStop) / 255;
 189                                     break;
 190                                 }
 191                             }
 192                         }
 193                         else {
 194                             spriteBrightness = spriteColor.getGrayscale() / 255;
 195                         }
 196                         labelColor = Color.fromString(label.attr.color || label.attr.fill).getHSL();
 197
 198                         labelColor[2] = spriteBrightness &gt; 0.5? 0.2 : 0.8;
 199                         label.setAttributes({
 200                             fill: String(Color.fromHSL.apply({}, labelColor))
 201                         }, true);
 202                     }
 203                 }
 204                 count++;
 205                 index++;
 206             }
 207         }
 208         me.hideLabels(count);
 209     },
 210
 211     //@private a method to hide labels.
 212     hideLabels: function(index) {
 213         var labelsGroup = this.labelsGroup, len;
 214         if (labelsGroup) {
 215             len = labelsGroup.getCount();
 216             while (len--&gt;index) {
 217                 labelsGroup.getAt(len).hide(true);
 218             }
 219         }
 220     }
 221 });</pre>
 222 </body>
 223 </html>