Extjs 4.2.1 堆积条形图最小值和最大值根据商店变化答案

【问题标题】：Extjs 4.2.1 Stacked bar chart Minimum and maximium values changes based on storeExtjs 4.2.1 堆积条形图最小值和最大值根据商店变化
【发布时间】：2013-09-26 05:18:56
【问题描述】：

您好，我正在开发一个 extjs 4.2.1 应用程序，我在其中使用条形图（堆叠）。在 x 轴上，我希望范围从 -100（最小值）到最大值（100），相差 20（majorTickSteps=10）。

下面是代码

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']
        }]
    });

如果 stacked = true ，x 轴的最小值和最大值会根据存储而改变
如果stacked = false，x 轴最小值和最大值保持不变，但不会堆叠。

我需要具有我指定的最小值和最大值的堆积条形图。我该如何继续。任何帮助将不胜感激。

【问题讨论】：

标签： javascript jquery extjs

【解决方案1】：

这是 ExtJS 中的 known issue (EXTJSIV-7844)。一种解决方案是为您的轴覆盖 processView 函数。

原始代码如下所示（see the 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();
    }
}

如您所见，有一些代码可以故意阻止您执行您正在尝试执行的操作。我不确定为什么代码在那里，但一个简单的解决方法是覆盖processView 函数，这样它就不会这样做。

processView: function() {
    var me = this;

    if (me.constrain) {
        me.doConstrain();
    }
}

有关工作示例，请参阅 this fiddle。

【讨论】：