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; }
11 <script type="text/javascript">
12 function highlight() {
13 document.getElementById(location.hash.replace(/#/, "")).className = "highlight";
17 <body onload="prettyPrint(); highlight();">
18 <pre class="prettyprint lang-js"><span id='Ext-chart-Label'>/**
19 </span> * @class Ext.chart.Label
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.
24 * The methods implemented by the Series are:
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 <b>false</b> if the label is hidden
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.</li>
37 * - *`storeItem`* The element of the store that is related to the label sprite</li>
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 <b>false</b> if the label is hidden.
42 * - *`animate`* A boolean value to set or unset animations for the labels.
44 Ext.define('Ext.chart.Label', {
46 /* Begin Definitions */
48 requires: ['Ext.draw.Color'],
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 "rotate", "middle", "insideStart",
55 * "insideEnd", "outside", "over", "under", or "none" to prevent label rendering.
56 * Default value: 'none'.
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).
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'.
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.
78 <span id='Ext-chart-Label-cfg-font'> /**
79 </span> * @cfg {String} font
80 * The font used for the labels.
81 * Defautl value: "11px Helvetica, sans-serif".
84 <span id='Ext-chart-Label-cfg-orientation'> /**
85 </span> * @cfg {String} orientation
86 * Either "horizontal" or "vertical".
87 * Dafault value: "horizontal".
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; }
97 //@private a regex to parse url type colors.
98 colorStringRe: /url\s*\(\s*#([^\/)]+)\s*\)/,
100 //@private the mixin constructor. Used internally by Series.
101 constructor: function(config) {
103 me.label = Ext.applyIf(me.label || {},
105 display: "none",
106 color: "#000",
107 field: "name",
109 font: "11px Helvetica, sans-serif",
110 orientation: "horizontal",
111 renderer: function(v) {
116 if (me.label.display !== 'none') {
117 me.labelsGroup = me.chart.surface.getGroup(me.seriesId + '-labels');
121 //@private a method to render all labels in the labelGroup
122 renderLabels: function() {
125 gradients = chart.gradients,
127 animate = chart.animate,
129 display = config.display,
130 color = config.color,
131 field = [].concat(config.field),
132 group = me.labelsGroup,
133 store = me.chart.store,
134 len = store.getCount(),
135 itemLength = (items || 0) && items.length,
136 ratio = itemLength / len,
137 gradientsCount = (gradients || 0) && gradients.length,
138 Color = Ext.draw.Color,
139 gradient, i, count, index, j, k, colorStopTotal, colorStopIndex, colorStop, item, label,
140 storeItem, sprite, spriteColor, spriteBrightness, labelColor, colorString;
142 if (display == 'none') {
146 for (i = 0, count = 0; i < len; i++) {
148 for (j = 0; j < ratio; j++) {
150 label = group.getAt(count);
151 storeItem = store.getAt(i);
154 while(this.__excludes && this.__excludes[index]) {
158 if (!item && label) {
162 if (item && field[j]) {
164 label = me.onCreateLabel(storeItem, item, i, display, j, index);
166 me.onPlaceLabel(label, storeItem, item, i, display, animate, j, index);
169 if (config.contrast && item.sprite) {
170 sprite = item.sprite;
171 //set the color string to the color to be set.
172 if (sprite._endStyle) {
173 colorString = sprite._endStyle.fill;
175 else if (sprite._to) {
176 colorString = sprite._to.fill;
179 colorString = sprite.attr.fill;
181 colorString = colorString || sprite.attr.fill;
183 spriteColor = Color.fromString(colorString);
184 //color wasn't parsed property maybe because it's a gradient id
185 if (colorString && !spriteColor) {
186 colorString = colorString.match(me.colorStringRe)[1];
187 for (k = 0; k < gradientsCount; k++) {
188 gradient = gradients[k];
189 if (gradient.id == colorString) {
191 colorStop = 0; colorStopTotal = 0;
192 for (colorStopIndex in gradient.stops) {
194 colorStopTotal += Color.fromString(gradient.stops[colorStopIndex].color).getGrayscale();
196 spriteBrightness = (colorStopTotal / colorStop) / 255;
202 spriteBrightness = spriteColor.getGrayscale() / 255;
204 if (label.isOutside) {
205 spriteBrightness = 1;
207 labelColor = Color.fromString(label.attr.color || label.attr.fill).getHSL();
208 labelColor[2] = spriteBrightness > 0.5 ? 0.2 : 0.8;
209 label.setAttributes({
210 fill: String(Color.fromHSL.apply({}, labelColor))
218 me.hideLabels(count);
221 //@private a method to hide labels.
222 hideLabels: function(index) {
223 var labelsGroup = this.labelsGroup, len;
225 len = labelsGroup.getCount();
226 while (len-->index) {
227 labelsGroup.getAt(len).hide(true);