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