[英]Extjs 4.2.1 Stacked bar chart Minimum and maximium values changes based on store
Hi i am working on a extjs 4.2.1 application in which i am using the bar chart (stacked) . 嗨,我正在extjs 4.2.1应用程序上工作,我在其中使用条形图(堆叠)。 In x axis i want range from -100(minimum) to maximum (100) with a difference of 20 (majorTickSteps=10). 在x轴上,我希望范围从-100(最小)到最大(100),且相差20(majorTickSteps = 10)。
Below is the code 下面是代码
var store = Ext.create('Ext.data.JsonStore', {
fields: ['name', 'cost','sell'],
data: [
{'name': "2013", 'cost': -36.483395098129556, 'sell': 25.516604901870444},
{'name': "2013", 'cost': -27.483395098129556, 'sell': 8.516604901870444},
{'name': "2013", 'cost': -35.483395098129556, 'sell': 19.516604901870444},
{'name': "2013", 'cost': -25.483395098129556, 'sell': 33.516604901870444}
]
}); });
Ext.create('Ext.chart.Chart', {
renderTo: Ext.getBody(),
id:'chart',
width: 580,
height: 165,
animate: true,
store: store,
axes: [{
type: 'Numeric',
position: 'bottom',
fields: ['cost','sell'],
grid: true,
minimum: -100,
maximum:100
}, {
type: 'Category',
position: 'left',
fields: ['name']
}],
series: [{
type: 'bar',
axis: 'bottom',
stacked: true,
xField: 'name',
yField: ['cost','sell']
}]
});
I need stacked bar chart with minimum and maximum values which i specified. 我需要具有指定的最小值和最大值的堆叠条形图。 How can i proceed . 我该如何进行。 Any help would be greatly appreciated. 任何帮助将不胜感激。
This is a known issue (EXTJSIV-7844) in ExtJS. 这是ExtJS中的一个已知问题 (EXTJSIV-7844)。 A solution is to override the processView
function for your axis. 一个解决方案是为您的轴覆盖processView
函数。
The original code looks like this ( see the docs ): 原始代码如下所示( 请参阅docs ):
processView: function() {
var me = this,
chart = me.chart,
series = chart.series.items,
i, l;
for (i = 0, l = series.length; i < l; i++) {
if (series[i].stacked) {
// Do not constrain stacked charts (bar, column, or area).
delete me.minimum;
delete me.maximum;
me.constrain = false;
break;
}
}
if (me.constrain) {
me.doConstrain();
}
}
As you can see, there is code in place to intentionally prevent you from doing what you're trying to do. 如您所见,有适当的代码可以阻止您执行自己想做的事情。 I'm not sure why the code is there, but a simple fix is to override the processView
function such that it doesn't do that. 我不确定为什么会有代码,但是一个简单的解决方法是重写processView
函数,使其不会执行此操作。
processView: function() {
var me = this;
if (me.constrain) {
me.doConstrain();
}
}
See this fiddle for a working example. 有关工作示例,请参见此小提琴 。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.