<!DOCTYPE html>
|
<html>
|
<head>
|
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
|
<title>The source code</title>
|
<link href="../resources/prettify/prettify.css" type="text/css" rel="stylesheet" />
|
<script type="text/javascript" src="../resources/prettify/prettify.js"></script>
|
<style type="text/css">
|
.highlight { display: block; background-color: #ddd; }
|
</style>
|
<script type="text/javascript">
|
function highlight() {
|
document.getElementById(location.hash.replace(/#/, "")).className = "highlight";
|
}
|
</script>
|
</head>
|
<body onload="prettyPrint(); highlight();">
|
<pre class="prettyprint lang-js"><span id='Ext-chart-Label'>/**
|
</span> * Labels is a mixin to the Series class. Labels methods are implemented
|
* in each of the Series (Pie, Bar, etc) for label creation and placement.
|
*
|
* The 2 methods that must be implemented by the Series are:
|
*
|
* - {@link #onCreateLabel}
|
* - {@link #onPlaceLabel}
|
*
|
* The application can override these methods to control the style and
|
* location of the labels. For instance, to display the labels in green and
|
* add a '+' symbol when the value of a Line series exceeds 50:
|
*
|
* Ext.define('Ext.chart.series.MyLine', {
|
* extend: 'Ext.chart.series.Line',
|
* alias: ['series.myline', 'Ext.chart.series.MyLine'],
|
* type: 'MYLINE',
|
*
|
* onPlaceLabel: function(label, storeItem, item, i, display, animate){
|
* if (storeItem.data.y >= 50) {
|
* label.setAttributes({
|
* fill: '#080',
|
* text: "+" + storeItem.data.y
|
* }, true);
|
* }
|
* return this.callParent(arguments);
|
* }
|
* });
|
*
|
* Note that for simple effects, like the example above, it is simpler
|
* for the application to provide a label.renderer function in the config:
|
*
|
* label: {
|
* renderer: function(value, label, storeItem, item, i, display, animate, index) {
|
* if (value >= 50) {
|
* label.setAttributes({fill:'#080'});
|
* value = "+" + value;
|
* }
|
* return value;
|
* }
|
* }
|
*
|
* The rule of thumb is that to customize the value and modify simple visual attributes, it
|
* is simpler to use a renderer function, while overridding `onCreateLabel` and `onPlaceLabel`
|
* allows the application to take entire control over the labels.
|
*
|
*/
|
Ext.define('Ext.chart.Label', {
|
|
/* Begin Definitions */
|
|
requires: ['Ext.draw.Color'],
|
|
/* End Definitions */
|
|
<span id='Ext-chart-Label-method-onCreateLabel'> /**
|
</span> * @method onCreateLabel
|
* @template
|
*
|
* Called each time a new label is created.
|
*
|
* **Note:** This method must be implemented in Series that mixes
|
* in this Label mixin.
|
*
|
* @param {Ext.data.Model} storeItem The element of the store that is
|
* related to the sprite.
|
* @param {Object} item The item related to the sprite.
|
* An item is an object containing the position of the shape
|
* used to describe the visualization and also pointing to the
|
* actual shape (circle, rectangle, path, etc).
|
* @param {Number} i The index of the element created
|
* (i.e the first created label, second created label, etc).
|
* @param {String} display The label.display type.
|
* May be `false` if the label is hidden
|
* @return {Ext.draw.Sprite} The created sprite that will draw the label.
|
*/
|
|
<span id='Ext-chart-Label-method-onPlaceLabel'> /**
|
</span> * @method onPlaceLabel
|
* @template
|
*
|
* Called for updating the position of the label.
|
*
|
* **Note:** This method must be implemented in Series that mixes
|
* in this Label mixin.
|
*
|
* @param {Ext.draw.Sprite} label The sprite that draws the label.
|
* @param {Ext.data.Model} storeItem The element of the store
|
* that is related to the sprite.
|
* @param {Object} item The item related to the
|
* sprite. An item is an object containing the position of
|
* the shape used to describe the visualization and also
|
* pointing to the actual shape (circle, rectangle, path, etc).
|
* @param {Number} i The index of the element to be updated
|
* (i.e. whether it is the first, second, third from the
|
* labelGroup)
|
* @param {String} display The label.display type.
|
* May be `false` if the label is hidden
|
* @param {Boolean} animate A boolean value to set or unset
|
* animations for the labels.
|
* @param {Number} index The series index.
|
*/
|
|
<span id='Ext-chart-Label-cfg-label'> /**
|
</span> * @cfg {Object} label
|
* Object with the following properties:
|
*
|
* @cfg {String} label.display
|
*
|
* Specifies the presence and position of the labels. The possible values depend on the chart type.
|
* For Line and Scatter charts: "under" | "over" | "rotate".
|
* For Bar and Column charts: "insideStart" | "insideEnd" | "outside".
|
* For Pie charts: "outside" | "rotate".
|
* For all charts: "none" hides the labels and "middle" is reserved for future use.
|
* On stacked Bar and stacked Column charts, if 'stackedDisplay' is set, the values
|
* "over" or "under" can be passed internally to {@link #onCreateLabel} and {@link #onPlaceLabel}
|
* (however they cannot be used by the application as config values for label.display).
|
*
|
* Default value: 'none'.
|
*
|
* @cfg {String} label.stackedDisplay
|
*
|
* The type of label we want to display as a summary on a stacked
|
* bar or a stacked column. If set to 'total', the total amount
|
* of all the stacked values is displayed on top of the column.
|
* If set to 'balances', the total amount of the positive values
|
* is displayed on top of the column and the total amount of the
|
* negative values is displayed at the bottom.
|
*
|
* Default value: 'none'.
|
*
|
* @cfg {String} label.color
|
*
|
* The color of the label text.
|
*
|
* Default value: '#000' (black).
|
*
|
* @cfg {Boolean} label.contrast
|
*
|
* True to render the label in contrasting color with the backround of a column
|
* in a Bar chart or of a slice in a Pie chart. The label color should be specified
|
* in hex values (eg. '#f00' or '#ff0000'), not as a CSS color name (eg. 'red').
|
*
|
* Default value: false.
|
*
|
* @cfg {String|String[]} label.field
|
*
|
* The name(s) of the field(s) to be displayed in the labels. If your chart has 3 series
|
* that correspond to the fields 'a', 'b', and 'c' of your model and you only want to
|
* display labels for the series 'c', you must still provide an array `[null, null, 'c']`.
|
*
|
* Default value: 'name'.
|
*
|
* @cfg {Number} label.minMargin
|
*
|
* Specifies the minimum distance from a label to the origin of
|
* the visualization. This parameter is useful when using
|
* PieSeries width variable pie slice lengths.
|
*
|
* Default value: 50.
|
*
|
* @cfg {String} label.font
|
*
|
* The font used for the labels.
|
*
|
* Default value: `"11px Helvetica, sans-serif"`.
|
*
|
* @cfg {String} label.orientation
|
*
|
* Either "horizontal" or "vertical".
|
*
|
* Default value: `"horizontal"`.
|
*
|
* @cfg {Function} label.renderer
|
*
|
* Optional function for formatting the label into a displayable value.
|
*
|
* The arguments to the method are:
|
*
|
* - *`value`* The value
|
* - *`label`*, *`storeItem`*, *`item`*, *`i`*, *`display`*, *`animate`*, *`index`*
|
*
|
* Same arguments as {@link #onPlaceLabel}.
|
*
|
* Default value: `function(v) { return v; }`
|
*/
|
|
<span id='Ext-chart-Label-property-colorStringRe'> // @private a regex to parse url type colors.
|
</span> colorStringRe: /url\s*\(\s*#([^\/)]+)\s*\)/,
|
|
<span id='Ext-chart-Label-method-constructor'> // @private the mixin constructor. Used internally by Series.
|
</span> constructor: function(config) {
|
var me = this;
|
me.label = Ext.applyIf(me.label || {},
|
{
|
display: "none",
|
stackedDisplay: "none",
|
color: "#000",
|
field: "name",
|
minMargin: 50,
|
font: "11px Helvetica, sans-serif",
|
orientation: "horizontal",
|
renderer: Ext.identityFn
|
});
|
|
if (me.label.display !== 'none') {
|
me.labelsGroup = me.chart.surface.getGroup(me.seriesId + '-labels');
|
}
|
},
|
|
<span id='Ext-chart-Label-method-renderLabels'> // @private a method to render all labels in the labelGroup
|
</span> renderLabels: function() {
|
var me = this,
|
chart = me.chart,
|
gradients = chart.gradients,
|
items = me.items,
|
animate = chart.animate,
|
config = me.label,
|
display = config.display,
|
stackedDisplay = config.stackedDisplay,
|
format = config.renderer,
|
color = config.color,
|
field = [].concat(config.field),
|
group = me.labelsGroup,
|
groupLength = (group || 0) && group.length,
|
store = me.chart.getChartStore(),
|
len = store.getCount(),
|
itemLength = (items || 0) && items.length,
|
ratio = itemLength / len,
|
gradientsCount = (gradients || 0) && gradients.length,
|
Color = Ext.draw.Color,
|
hides = [],
|
gradient, i, count, groupIndex, index, j, k, colorStopTotal, colorStopIndex, colorStop, item, label,
|
storeItem, sprite, spriteColor, spriteBrightness, labelColor, colorString,
|
total, totalPositive, totalNegative, topText, bottomText;
|
|
if (display == 'none' || !group) {
|
return;
|
}
|
// no items displayed, hide all labels
|
if(itemLength == 0){
|
while(groupLength--) {
|
hides.push(groupLength);
|
}
|
} else {
|
for (i = 0, count = 0, groupIndex = 0; i < len; i++) {
|
index = 0;
|
for (j = 0; j < ratio; j++) {
|
item = items[count];
|
label = group.getAt(groupIndex);
|
storeItem = store.getAt(i);
|
//check the excludes
|
while(this.__excludes && this.__excludes[index]) {
|
index++;
|
}
|
|
if (!item && label) {
|
label.hide(true);
|
groupIndex++;
|
}
|
|
if (item && field[j]) {
|
if (!label) {
|
label = me.onCreateLabel(storeItem, item, i, display);
|
if (!label) {
|
break;
|
}
|
}
|
|
// set color (the app can override it in onPlaceLabel)
|
label.setAttributes({
|
fill: String(color)
|
}, true);
|
|
// position the label
|
me.onPlaceLabel(label, storeItem, item, i, display, animate, index);
|
groupIndex++;
|
|
// set contrast
|
if (config.contrast && item.sprite) {
|
sprite = item.sprite;
|
//set the color string to the color to be set, only read the
|
// _endStyle/_to if we're animating, otherwise they're not relevant
|
if (animate && sprite._endStyle) {
|
colorString = sprite._endStyle.fill;
|
} else if (animate && sprite._to) {
|
colorString = sprite._to.fill;
|
} else {
|
colorString = sprite.attr.fill;
|
}
|
colorString = colorString || sprite.attr.fill;
|
|
spriteColor = Color.fromString(colorString);
|
//color wasn't parsed property maybe because it's a gradient id
|
if (colorString && !spriteColor) {
|
colorString = colorString.match(me.colorStringRe)[1];
|
for (k = 0; k < gradientsCount; k++) {
|
gradient = gradients[k];
|
if (gradient.id == colorString) {
|
//avg color stops
|
colorStop = 0; colorStopTotal = 0;
|
for (colorStopIndex in gradient.stops) {
|
colorStop++;
|
colorStopTotal += Color.fromString(gradient.stops[colorStopIndex].color).getGrayscale();
|
}
|
spriteBrightness = (colorStopTotal / colorStop) / 255;
|
break;
|
}
|
}
|
}
|
else {
|
spriteBrightness = spriteColor.getGrayscale() / 255;
|
}
|
if (label.isOutside) {
|
spriteBrightness = 1;
|
}
|
labelColor = Color.fromString(label.attr.fill || label.attr.color).getHSL();
|
labelColor[2] = spriteBrightness > 0.5 ? 0.2 : 0.8;
|
label.setAttributes({
|
fill: String(Color.fromHSL.apply({}, labelColor))
|
}, true);
|
}
|
|
// display totals on stacked charts
|
if (me.stacked && stackedDisplay && (item.totalPositiveValues || item.totalNegativeValues)) {
|
totalPositive = (item.totalPositiveValues || 0);
|
totalNegative = (item.totalNegativeValues || 0);
|
total = totalPositive + totalNegative;
|
|
if (stackedDisplay == 'total') {
|
topText = format(total);
|
} else if (stackedDisplay == 'balances') {
|
if (totalPositive == 0 && totalNegative == 0) {
|
topText = format(0);
|
} else {
|
topText = format(totalPositive);
|
bottomText = format(totalNegative);
|
}
|
}
|
|
if (topText) {
|
label = group.getAt(groupIndex);
|
if (!label) {
|
label = me.onCreateLabel(storeItem, item, i, 'over');
|
}
|
labelColor = Color.fromString(label.attr.color || label.attr.fill).getHSL();
|
label.setAttributes({
|
text: topText,
|
style: config.font,
|
fill: String(Color.fromHSL.apply({}, labelColor))
|
}, true);
|
me.onPlaceLabel(label, storeItem, item, i, 'over', animate, index);
|
groupIndex ++;
|
}
|
|
if (bottomText) {
|
label = group.getAt(groupIndex);
|
if (!label) {
|
label = me.onCreateLabel(storeItem, item, i, 'under');
|
}
|
labelColor = Color.fromString(label.attr.color || label.attr.fill).getHSL();
|
label.setAttributes({
|
text: bottomText,
|
style: config.font,
|
fill: String(Color.fromHSL.apply({}, labelColor))
|
}, true);
|
me.onPlaceLabel(label, storeItem, item, i, 'under', animate, index);
|
groupIndex ++;
|
}
|
}
|
}
|
count++;
|
index++;
|
}
|
}
|
groupLength = group.length;
|
|
while(groupLength > groupIndex){
|
hides.push(groupIndex);
|
groupIndex++;
|
}
|
}
|
me.hideLabels(hides);
|
},
|
|
<span id='Ext-chart-Label-method-hideLabels'> hideLabels: function(hides){
|
</span> var labelsGroup = this.labelsGroup,
|
hlen = !!hides && hides.length;
|
|
if (!labelsGroup) {
|
return;
|
}
|
|
if (hlen === false) {
|
hlen = labelsGroup.getCount();
|
while (hlen--) {
|
labelsGroup.getAt(hlen).hide(true);
|
}
|
} else {
|
while(hlen--) {
|
labelsGroup.getAt(hides[hlen]).hide(true);
|
}
|
}
|
}
|
});
|
</pre>
|
</body>
|
</html>
|
