/** * @class Ext.chart.series.Bar3D * @extends Ext.chart.series.Bar * * Creates a 3D Bar or 3D Column Chart (depending on the value of the * {@link Ext.chart.CartesianChart#flipXY flipXY} config). * * Note: 'bar3d' series is meant to be used with the * {@link Ext.chart.axis.Category 'category3d'} axis as its x-axis. * * @example * Ext.create({ * xtype: 'cartesian', * renderTo: Ext.getBody(), * width: 600, * height: 400, * innerPadding: '0 10 0 10', * store: { * fields: ['name', 'apples', 'oranges'], * data: [{ * name: 'Eric', * apples: 10, * oranges: 3 * }, { * name: 'Mary', * apples: 7, * oranges: 2 * }, { * name: 'John', * apples: 5, * oranges: 2 * }, { * name: 'Bob', * apples: 2, * oranges: 3 * }, { * name: 'Joe', * apples: 19, * oranges: 1 * }, { * name: 'Macy', * apples: 13, * oranges: 4 * }] * }, * axes: [{ * type: 'numeric3d', * position: 'left', * fields: ['apples', 'oranges'], * title: { * text: 'Inventory', * fontSize: 15 * }, * grid: { * odd: { * fillStyle: 'rgba(255, 255, 255, 0.06)' * }, * even: { * fillStyle: 'rgba(0, 0, 0, 0.03)' * } * } * }, { * type: 'category3d', * position: 'bottom', * title: { * text: 'People', * fontSize: 15 * }, * fields: 'name' * }], * series: { * type: 'bar3d', * xField: 'name', * yField: ['apples', 'oranges'] * } * }); */Ext.define('Ext.chart.series.Bar3D', { extend: 'Ext.chart.series.Bar', requires: [ 'Ext.chart.series.sprite.Bar3D', 'Ext.chart.sprite.Bar3D' ], alias: 'series.bar3d', type: 'bar3d', seriesType: 'bar3dSeries', is3D: true, /** * @cfg {Object} style Custom style configuration for the sprite used in the series. * It overrides the style that is provided by the current theme. See * {@link Ext.chart.theme.series.Bar3D} */ config: { itemInstancing: { type: 'bar3d', animation: { customDurations: { x: 0, y: 0, width: 0, height: 0, depth: 0 } } }, highlightCfg: { opacity: 0.8 } }, /** * For 3D series, it's quite the opposite. It would be extremely odd, * if top segments were rendered as if they were under the bottom ones. */ reversedSpriteZOrder: false, updateXAxis: function(xAxis, oldXAxis) { //<debug> if (xAxis.type !== 'category3d') { Ext.raise("'bar3d' series should be used with a 'category3d' axis." + " Please refer to the 'bar3d' series docs."); } //</debug> this.callParent([xAxis, oldXAxis]); }, getDepth: function() { var sprite = this.getSprites()[0]; return sprite ? (sprite.depth || 0) : 0; } });