X-Git-Url: http://git.ithinksw.org/extjs.git/blobdiff_plain/7a654f8d43fdb43d78b63d90528bed6e86b608cc..f562e4c6e5fac7bcb445985b99acbea4d706e6f0:/docs/source/Legend.html
diff --git a/docs/source/Legend.html b/docs/source/Legend.html
index 5bba5b60..b9e62e8e 100644
--- a/docs/source/Legend.html
+++ b/docs/source/Legend.html
@@ -1,5 +1,22 @@
-Sencha Documentation Project/**
- * @class Ext.chart.Legend
+
+
+
+
+ The source code
+
+
+
+
+
+
+ /**
+ * @class Ext.chart.Legend
*
* Defines a legend for a chart's series.
* The 'chart' member must be set prior to rendering.
@@ -14,73 +31,74 @@
* 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', {
@@ -90,13 +108,13 @@ Ext.define('Ext.chart.Legend', {
/* End Definitions */
- /**
+ /**
* @cfg {Boolean} visible
* Whether or not the legend should be displayed.
*/
visible: true,
- /**
+ /**
* @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
@@ -104,51 +122,51 @@ Ext.define('Ext.chart.Legend', {
*/
position: 'bottom',
- /**
+ /**
* @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,
- /**
+ /**
* @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,
- /**
+ /**
* @cfg {String} labelFont
* Font to be used for the legend labels, eg '12px Helvetica'
*/
labelFont: '12px Helvetica, sans-serif',
- /**
+ /**
* @cfg {String} boxStroke
* Style of the stroke for the legend box
*/
boxStroke: '#000',
- /**
+ /**
* @cfg {String} boxStrokeWidth
* Width of the stroke for the legend box
*/
boxStrokeWidth: 1,
- /**
+ /**
* @cfg {String} boxFill
* Fill style for the legend box
*/
boxFill: '#FFF',
- /**
+ /**
* @cfg {Number} itemSpacing
* Amount of space between legend items
*/
itemSpacing: 10,
- /**
+ /**
* @cfg {Number} padding
* Amount of padding between the legend box's border and its items
*/
@@ -159,37 +177,41 @@ Ext.define('Ext.chart.Legend', {
// @private
height: 0,
- /**
+ /**
* @cfg {Number} boxZIndex
* Sets the z-index for the legend. Defaults to 100.
*/
boxZIndex: 100,
+ /**
+ * Creates new Legend.
+ * @param {Object} config (optional) Config object.
+ */
constructor: function(config) {
var me = this;
if (config) {
Ext.apply(me, config);
}
me.items = [];
- /**
+ /**
* 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;
},
- /**
+ /**
* @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
@@ -202,7 +224,7 @@ Ext.define('Ext.chart.Legend', {
}
},
- /**
+ /**
* @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.
*/
@@ -210,7 +232,7 @@ Ext.define('Ext.chart.Legend', {
return this.visible && this.chart.series.findIndex('showInLegend', true) !== -1;
},
- /**
+ /**
* @private Create the series markers and labels
*/
createItems: function() {
@@ -229,8 +251,8 @@ Ext.define('Ext.chart.Legend', {
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;
@@ -256,7 +278,7 @@ Ext.define('Ext.chart.Legend', {
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) {
@@ -289,7 +311,7 @@ Ext.define('Ext.chart.Legend', {
me.itemHeight = maxHeight;
},
- /**
+ /**
* @private Get the bounds for the legend's outer box
*/
getBBox: function() {
@@ -302,22 +324,29 @@ Ext.define('Ext.chart.Legend', {
};
},
- /**
+ /**
* @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();
},
- /**
+ /**
* @private Update the position of all the legend's sprites to match its current x/y values
*/
updatePosition: function() {
@@ -335,7 +364,7 @@ Ext.define('Ext.chart.Legend', {
chartY = chartBBox.y + insets,
surface = chart.surface,
mfloor = Math.floor;
-
+
if (me.isDisplayed()) {
// Find the position based on the dimensions
switch(me.position) {
@@ -370,4 +399,7 @@ Ext.define('Ext.chart.Legend', {
me.boxSprite.setAttributes(me.getBBox(), true);
}
}
-});
\ No newline at end of file
+});
+
+
+