X-Git-Url: http://git.ithinksw.org/extjs.git/blobdiff_plain/3789b528d8dd8aad4558e38e22d775bcab1cbd36..refs/heads/master:/docs/source/Bar2.html diff --git a/docs/source/Bar2.html b/docs/source/Bar2.html index 6da75bc5..4493e24e 100644 --- a/docs/source/Bar2.html +++ b/docs/source/Bar2.html @@ -3,8 +3,8 @@ The source code - - + + @@ -21,19 +21,18 @@ * Series must be appended in the *series* Chart array configuration. See the Chart documentation for more information. * A typical configuration object for the bar series could be: * - * {@img Ext.chart.series.Bar/Ext.chart.series.Bar.png Ext.chart.series.Bar chart series} - * + * @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} + * { '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, @@ -107,12 +106,12 @@ Ext.define('Ext.chart.series.Bar', { * @cfg {Boolean} column Whether to set the visualization as column chart or horizontal bar chart. */ column: false, - + /** * @cfg style Style properties that will override the theming series styles. */ style: {}, - + /** * @cfg {Number} gutter The gutter space between single bars, as a percentage of the bar width */ @@ -146,7 +145,7 @@ Ext.define('Ext.chart.series.Bar', { opacity: 0.8, color: '#f00' }, - + shadowAttributes: [{ "stroke-width": 6, "stroke-opacity": 0.05, @@ -184,11 +183,11 @@ Ext.define('Ext.chart.series.Bar', { // @private sets the bar girth. getBarGirth: function() { var me = this, - store = me.chart.store, + store = me.chart.getChartStore(), column = me.column, ln = store.getCount(), gutter = me.gutter / 100; - + return (me.chart.chartBBox[column ? 'width' : 'height'] - me[column ? 'xPadding' : 'yPadding'] * 2) / (ln * (gutter + 1) - gutter); }, @@ -204,7 +203,7 @@ Ext.define('Ext.chart.series.Bar', { getBounds: function() { var me = this, chart = me.chart, - store = chart.substore || chart.store, + store = chart.getChartStore(), bars = [].concat(me.yField), barsLen = bars.length, groupBarsLen = barsLen, @@ -236,8 +235,8 @@ Ext.define('Ext.chart.series.Bar', { axis = chart.axes.get(me.axis); if (axis) { out = axis.calcEnds(); - minY = out.from || axis.prevMin; - maxY = mmax(out.to || axis.prevMax, 0); + minY = out.from; + maxY = out.to; } } @@ -247,8 +246,8 @@ Ext.define('Ext.chart.series.Bar', { fields: [].concat(me.yField) }); out = axis.calcEnds(); - minY = out.from || axis.prevMin; - maxY = mmax(out.to || axis.prevMax, 0); + minY = out.from; + maxY = out.to; } if (!Ext.isNumber(minY)) { @@ -305,7 +304,7 @@ Ext.define('Ext.chart.series.Bar', { getPaths: function() { var me = this, chart = me.chart, - store = chart.substore || chart.store, + store = chart.getChartStore(), bounds = me.bounds = me.getBounds(), items = me.items = [], gutter = me.gutter / 100, @@ -336,14 +335,14 @@ Ext.define('Ext.chart.series.Bar', { top = bounds.zero; totalDim = 0; totalNegDim = 0; - hasShadow = false; + hasShadow = false; for (j = 0, counter = 0; j < barsLen; j++) { // Excluded series if (me.__excludes && me.__excludes[j]) { continue; } yValue = record.get(bounds.bars[j]); - height = Math.round((yValue - ((bounds.minY < 0) ? 0 : bounds.minY)) * bounds.scale); + height = Math.round((yValue - mmax(bounds.minY, 0)) * bounds.scale); barAttr = { fill: colors[(barsLen > 1 ? j : 0) % colorLength] }; @@ -449,7 +448,7 @@ Ext.define('Ext.chart.series.Bar', { shadowGroups = me.shadowGroups, shadowAttributes = me.shadowAttributes, shadowGroupsLn = shadowGroups.length, - store = chart.substore || chart.store, + store = chart.getChartStore(), column = me.column, items = me.items, shadows = [], @@ -507,7 +506,7 @@ Ext.define('Ext.chart.series.Bar', { drawSeries: function() { var me = this, chart = me.chart, - store = chart.substore || chart.store, + store = chart.getChartStore(), surface = chart.surface, animate = chart.animate, stacked = me.stacked, @@ -519,11 +518,11 @@ Ext.define('Ext.chart.series.Bar', { seriesStyle = me.seriesStyle, items, ln, i, j, baseAttrs, sprite, rendererAttributes, shadowIndex, shadowGroup, bounds, endSeriesStyle, barAttr, attrs, anim; - + if (!store || !store.getCount()) { return; } - + //fill colors are taken from the colors array. delete seriesStyle.fill; endSeriesStyle = Ext.apply(seriesStyle, this.style); @@ -597,7 +596,7 @@ Ext.define('Ext.chart.series.Bar', { } me.renderLabels(); }, - + // @private handled when creating a label. onCreateLabel: function(storeItem, item, i, display) { var me = this, @@ -611,7 +610,7 @@ Ext.define('Ext.chart.series.Bar', { group: group }, endLabelStyle || {})); }, - + // @private callback used when placing a label. onPlaceLabel: function(label, storeItem, item, i, display, animate, j, index) { // Determine the label's final position. Starts with the configured preferred value but @@ -647,6 +646,7 @@ Ext.define('Ext.chart.series.Bar', { text: text }); + label.isOutside = false; if (column) { if (display == outside) { if (height + offsetY + attr.height > (yValue >= 0 ? zero - chartBBox.y : chartBBox.y + chartBBox.height - zero)) { @@ -655,6 +655,7 @@ Ext.define('Ext.chart.series.Bar', { } else { if (height + offsetY > attr.height) { display = outside; + label.isOutside = true; } } x = attr.x + groupBarWidth / 2; @@ -672,6 +673,7 @@ Ext.define('Ext.chart.series.Bar', { else { if (width + offsetX > attr.width) { display = outside; + label.isOutside = true; } } x = display == insideStart ? @@ -764,14 +766,14 @@ Ext.define('Ext.chart.series.Bar', { sprite.show(); return this.callParent(arguments); }, - + isItemInPoint: function(x, y, item) { var bbox = item.sprite.getBBox(); return bbox.x <= x && bbox.y <= y && (bbox.x + bbox.width) >= x && (bbox.y + bbox.height) >= y; }, - + // @private hide all markers hideAll: function() { var axes = this.chart.axes; @@ -801,14 +803,35 @@ Ext.define('Ext.chart.series.Bar', { }); } }, - + /** * Returns a string with the color to be used for the series legend item. * @param index */ getLegendColor: function(index) { - var me = this; - return me.colorArrayStyle[index % me.colorArrayStyle.length]; + var me = this, + colorLength = me.colorArrayStyle.length; + + if (me.style && me.style.fill) { + return me.style.fill; + } else { + return me.colorArrayStyle[index % colorLength]; + } + }, + + highlightItem: function(item) { + this.callParent(arguments); + this.renderLabels(); + }, + + unHighlightItem: function() { + this.callParent(arguments); + this.renderLabels(); + }, + + cleanHighlights: function() { + this.callParent(arguments); + this.renderLabels(); } });