<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>The source code</title>
- <link href="../prettify/prettify.css" type="text/css" rel="stylesheet" />
- <script type="text/javascript" src="../prettify/prettify.js"></script>
+ <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>
* 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,
</span> * @cfg {Boolean} column Whether to set the visualization as column chart or horizontal bar chart.
*/
column: false,
-
+
<span id='Ext-chart-series-Bar-cfg-style'> /**
</span> * @cfg style Style properties that will override the theming series styles.
*/
style: {},
-
+
<span id='Ext-chart-series-Bar-cfg-gutter'> /**
</span> * @cfg {Number} gutter The gutter space between single bars, as a percentage of the bar width
*/
opacity: 0.8,
color: '#f00'
},
-
+
shadowAttributes: [{
"stroke-width": 6,
"stroke-opacity": 0.05,
// @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);
},
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,
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;
}
}
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)) {
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,
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]
};
shadowGroups = me.shadowGroups,
shadowAttributes = me.shadowAttributes,
shadowGroupsLn = shadowGroups.length,
- store = chart.substore || chart.store,
+ store = chart.getChartStore(),
column = me.column,
items = me.items,
shadows = [],
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,
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);
}
me.renderLabels();
},
-
+
// @private handled when creating a label.
onCreateLabel: function(storeItem, item, i, display) {
var me = this,
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
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)) {
} else {
if (height + offsetY > attr.height) {
display = outside;
+ label.isOutside = true;
}
}
x = attr.x + groupBarWidth / 2;
else {
if (width + offsetX > attr.width) {
display = outside;
+ label.isOutside = true;
}
}
x = display == insideStart ?
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;
});
}
},
-
+
<span id='Ext-chart-series-Bar-method-getLegendColor'> /**
</span> * 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();
}
});</pre>
</body>
git.ithinksw.org / extjs.git / blobdiff