-<!DOCTYPE html><html><head><title>Sencha Documentation Project</title><link rel="stylesheet" href="../reset.css" type="text/css"><link rel="stylesheet" href="../prettify.css" type="text/css"><link rel="stylesheet" href="../prettify_sa.css" type="text/css"><script type="text/javascript" src="../prettify.js"></script></head><body onload="prettyPrint()"><pre class="prettyprint"><pre><span id='Ext-chart.Legend-method-constructor'><span id='Ext-chart.Legend'>/**
-</span></span> * @class Ext.chart.Legend
+<!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-Legend'>/**
+</span> * @class Ext.chart.Legend
*
* Defines a legend for a chart's series.
* The 'chart' member must be set prior to rendering.
* legend: {
* position: 'right'
* },
- *
- * Full example:
- <pre><code>
- var store = Ext.create('Ext.data.JsonStore', {
- fields: ['name', 'data1', 'data2', 'data3', 'data4', 'data5'],
- data: [
- {'name':'metric one', 'data1':10, 'data2':12, 'data3':14, 'data4':8, 'data5':13},
- {'name':'metric two', 'data1':7, 'data2':8, 'data3':16, 'data4':10, 'data5':3},
- {'name':'metric three', 'data1':5, 'data2':2, 'data3':14, 'data4':12, 'data5':7},
- {'name':'metric four', 'data1':2, 'data2':14, 'data3':6, 'data4':1, 'data5':23},
- {'name':'metric five', 'data1':27, 'data2':38, 'data3':36, 'data4':13, 'data5':33}
- ]
- });
-
- Ext.create('Ext.chart.Chart', {
- renderTo: Ext.getBody(),
- width: 500,
- height: 300,
- animate: true,
- store: store,
- shadow: true,
- theme: 'Category1',
- legend: {
- position: 'top'
- },
- axes: [{
- type: 'Numeric',
- grid: true,
- position: 'left',
- fields: ['data1', 'data2', 'data3', 'data4', 'data5'],
- title: 'Sample Values',
- grid: {
- odd: {
- opacity: 1,
- fill: '#ddd',
- stroke: '#bbb',
- 'stroke-width': 1
- }
- },
- minimum: 0,
- adjustMinimumByMajorUnit: 0
- }, {
- type: 'Category',
- position: 'bottom',
- fields: ['name'],
- title: 'Sample Metrics',
- grid: true,
- label: {
- rotate: {
- degrees: 315
- }
- }
- }],
- series: [{
- type: 'area',
- highlight: false,
- axis: 'left',
- xField: 'name',
- yField: ['data1', 'data2', 'data3', 'data4', 'data5'],
- style: {
- opacity: 0.93
- }
- }]
- });
- </code></pre>
*
- * @constructor
+ * ## Example
+ *
+ * @example
+ * var store = Ext.create('Ext.data.JsonStore', {
+ * fields: ['name', 'data1', 'data2', 'data3', 'data4', 'data5'],
+ * data: [
+ * { 'name': 'metric one', 'data1': 10, 'data2': 12, 'data3': 14, 'data4': 8, 'data5': 13 },
+ * { 'name': 'metric two', 'data1': 7, 'data2': 8, 'data3': 16, 'data4': 10, 'data5': 3 },
+ * { 'name': 'metric three', 'data1': 5, 'data2': 2, 'data3': 14, 'data4': 12, 'data5': 7 },
+ * { 'name': 'metric four', 'data1': 2, 'data2': 14, 'data3': 6, 'data4': 1, 'data5': 23 },
+ * { 'name': 'metric five', 'data1': 27, 'data2': 38, 'data3': 36, 'data4': 13, 'data5': 33 }
+ * ]
+ * });
+ *
+ * Ext.create('Ext.chart.Chart', {
+ * renderTo: Ext.getBody(),
+ * width: 500,
+ * height: 300,
+ * animate: true,
+ * store: store,
+ * shadow: true,
+ * theme: 'Category1',
+ * legend: {
+ * position: 'top'
+ * },
+ * axes: [
+ * {
+ * type: 'Numeric',
+ * grid: true,
+ * position: 'left',
+ * fields: ['data1', 'data2', 'data3', 'data4', 'data5'],
+ * title: 'Sample Values',
+ * grid: {
+ * odd: {
+ * opacity: 1,
+ * fill: '#ddd',
+ * stroke: '#bbb',
+ * 'stroke-width': 1
+ * }
+ * },
+ * minimum: 0,
+ * adjustMinimumByMajorUnit: 0
+ * },
+ * {
+ * type: 'Category',
+ * position: 'bottom',
+ * fields: ['name'],
+ * title: 'Sample Metrics',
+ * grid: true,
+ * label: {
+ * rotate: {
+ * degrees: 315
+ * }
+ * }
+ * }
+ * ],
+ * series: [{
+ * type: 'area',
+ * highlight: false,
+ * axis: 'left',
+ * xField: 'name',
+ * yField: ['data1', 'data2', 'data3', 'data4', 'data5'],
+ * style: {
+ * opacity: 0.93
+ * }
+ * }]
+ * });
*/
Ext.define('Ext.chart.Legend', {
/* End Definitions */
-<span id='Ext-chart.Legend-cfg-visible'> /**
+<span id='Ext-chart-Legend-cfg-visible'> /**
</span> * @cfg {Boolean} visible
* Whether or not the legend should be displayed.
*/
visible: true,
-<span id='Ext-chart.Legend-cfg-position'> /**
+<span id='Ext-chart-Legend-cfg-position'> /**
</span> * @cfg {String} position
* The position of the legend in relation to the chart. One of: "top",
* "bottom", "left", "right", or "float". If set to "float", then the legend
*/
position: 'bottom',
-<span id='Ext-chart.Legend-cfg-x'> /**
+<span id='Ext-chart-Legend-cfg-x'> /**
</span> * @cfg {Number} x
- * X-position of the legend box. Used directly if position is set to "float", otherwise
+ * X-position of the legend box. Used directly if position is set to "float", otherwise
* it will be calculated dynamically.
*/
x: 0,
-<span id='Ext-chart.Legend-cfg-y'> /**
+<span id='Ext-chart-Legend-cfg-y'> /**
</span> * @cfg {Number} y
* Y-position of the legend box. Used directly if position is set to "float", otherwise
* it will be calculated dynamically.
*/
y: 0,
-<span id='Ext-chart.Legend-cfg-labelFont'> /**
+<span id='Ext-chart-Legend-cfg-labelFont'> /**
</span> * @cfg {String} labelFont
* Font to be used for the legend labels, eg '12px Helvetica'
*/
labelFont: '12px Helvetica, sans-serif',
-<span id='Ext-chart.Legend-cfg-boxStroke'> /**
+<span id='Ext-chart-Legend-cfg-boxStroke'> /**
</span> * @cfg {String} boxStroke
* Style of the stroke for the legend box
*/
boxStroke: '#000',
-<span id='Ext-chart.Legend-cfg-boxStrokeWidth'> /**
+<span id='Ext-chart-Legend-cfg-boxStrokeWidth'> /**
</span> * @cfg {String} boxStrokeWidth
* Width of the stroke for the legend box
*/
boxStrokeWidth: 1,
-<span id='Ext-chart.Legend-cfg-boxFill'> /**
+<span id='Ext-chart-Legend-cfg-boxFill'> /**
</span> * @cfg {String} boxFill
* Fill style for the legend box
*/
boxFill: '#FFF',
-<span id='Ext-chart.Legend-cfg-itemSpacing'> /**
+<span id='Ext-chart-Legend-cfg-itemSpacing'> /**
</span> * @cfg {Number} itemSpacing
* Amount of space between legend items
*/
itemSpacing: 10,
-<span id='Ext-chart.Legend-cfg-padding'> /**
+<span id='Ext-chart-Legend-cfg-padding'> /**
</span> * @cfg {Number} padding
* Amount of padding between the legend box's border and its items
*/
// @private
height: 0,
-<span id='Ext-chart.Legend-cfg-boxZIndex'> /**
+<span id='Ext-chart-Legend-cfg-boxZIndex'> /**
</span> * @cfg {Number} boxZIndex
* Sets the z-index for the legend. Defaults to 100.
*/
boxZIndex: 100,
+<span id='Ext-chart-Legend-method-constructor'> /**
+</span> * Creates new Legend.
+ * @param {Object} config (optional) Config object.
+ */
constructor: function(config) {
var me = this;
if (config) {
Ext.apply(me, config);
}
me.items = [];
-<span id='Ext-chart.Legend-property-isVertical'> /**
+<span id='Ext-chart-Legend-property-isVertical'> /**
</span> * Whether the legend box is oriented vertically, i.e. if it is on the left or right side or floating.
* @type {Boolean}
*/
me.isVertical = ("left|right|float".indexOf(me.position) !== -1);
-
+
// cache these here since they may get modified later on
me.origX = me.x;
me.origY = me.y;
},
-<span id='Ext-chart.Legend-method-create'> /**
+<span id='Ext-chart-Legend-method-create'> /**
</span> * @private Create all the sprites for the legend
*/
create: function() {
var me = this;
+ me.createBox();
me.createItems();
if (!me.created && me.isDisplayed()) {
- me.createBox();
me.created = true;
// Listen for changes to series titles to trigger regeneration of the legend
}
},
-<span id='Ext-chart.Legend-method-isDisplayed'> /**
+<span id='Ext-chart-Legend-method-isDisplayed'> /**
</span> * @private Determine whether the legend should be displayed. Looks at the legend's 'visible' config,
* and also the 'showInLegend' config for each of the series.
*/
return this.visible && this.chart.series.findIndex('showInLegend', true) !== -1;
},
-<span id='Ext-chart.Legend-method-createItems'> /**
+<span id='Ext-chart-Legend-method-createItems'> /**
</span> * @private Create the series markers and labels
*/
createItems: function() {
math = Math,
mfloor = math.floor,
mmax = math.max,
- index = 0,
- i = 0,
+ index = 0,
+ i = 0,
len = items ? items.length : 0,
x, y, spacing, item, bbox, height, width;
bbox = item.getBBox();
//always measure from x=0, since not all markers go all the way to the left
- width = bbox.width;
+ width = bbox.width;
height = bbox.height;
if (i + j === 0) {
me.itemHeight = maxHeight;
},
-<span id='Ext-chart.Legend-method-getBBox'> /**
+<span id='Ext-chart-Legend-method-getBBox'> /**
</span> * @private Get the bounds for the legend's outer box
*/
getBBox: function() {
};
},
-<span id='Ext-chart.Legend-method-createBox'> /**
+<span id='Ext-chart-Legend-method-createBox'> /**
</span> * @private Create the box around the legend items
*/
createBox: function() {
var me = this,
- box = me.boxSprite = me.chart.surface.add(Ext.apply({
- type: 'rect',
- stroke: me.boxStroke,
- "stroke-width": me.boxStrokeWidth,
- fill: me.boxFill,
- zIndex: me.boxZIndex
- }, me.getBBox()));
+ box;
+
+ if (me.boxSprite) {
+ me.boxSprite.destroy();
+ }
+
+ box = me.boxSprite = me.chart.surface.add(Ext.apply({
+ type: 'rect',
+ stroke: me.boxStroke,
+ "stroke-width": me.boxStrokeWidth,
+ fill: me.boxFill,
+ zIndex: me.boxZIndex
+ }, me.getBBox()));
+
box.redraw();
},
-<span id='Ext-chart.Legend-method-updatePosition'> /**
+<span id='Ext-chart-Legend-method-updatePosition'> /**
</span> * @private Update the position of all the legend's sprites to match its current x/y values
*/
updatePosition: function() {
chartY = chartBBox.y + insets,
surface = chart.surface,
mfloor = Math.floor;
-
+
if (me.isDisplayed()) {
// Find the position based on the dimensions
switch(me.position) {
me.boxSprite.setAttributes(me.getBBox(), true);
}
}
-});</pre></pre></body></html>
\ No newline at end of file
+});
+</pre>
+</body>
+</html>
git.ithinksw.org / extjs.git / blobdiff