使用ExtJS 4.2.0和外部数据源完全更新饼图

我目前正在创建一个“向下钻取”样式的饼图，单击一个“切片”可以用该切片中的数据更新饼图

例如，想象一个电子商务报告，它按顶级类别显示销售额：

衬衫-10000美元 裤子-8000美元 鞋子-3500美元

然后单击“衬衫”部分将显示衬衫类别中销售的详细信息：

T恤-7000美元 马球衫-2000美元 背心-1000美元

我这里有一个使用返回随机信息的数据源的基本示例：

如您所见，单击切片会导致不一致的行为。有时它似乎更新正确，但通常它似乎以某种方式合并或覆盖了以前的数据

我在图表、存储区等上尝试了我能找到的每一种“清除”、“更新”、“重置”方法，但我尝试的任何方法似乎都无法成功地用新数据“完全”更新饼图。谁能告诉我我做错了什么

Ext.onReady(function () {

var level = 1;

Ext.define('Report', {
    extend: 'Ext.data.Model',
    fields: [{
        name: 'category',
        type: 'string'
    }, {
        name: 'purchases',
        type: 'string'
    }],
});

var store = Ext.create('Ext.data.Store', {
    id: 'store',
    model: 'Report',
    autoLoad: true,
    proxy: {
        type: 'jsonp',
        url: 'http://informationarchitech.com/demos/rand.php',
        reader: {
            root: 'content',
        }
    }
});

Ext.create('Ext.chart.Chart', {
    renderTo: Ext.getBody(),
    width: 500,
    height: 350,
    animate: true,
    store: store,
    series: [{
        listeners: {
            itemmousedown: function (obj) {
                level++;
                store.getProxy().url = 'http://informationarchitech.com/demos/rand.php?parent=' + obj.storeItem.data['category'] + '&level=' + level;
                store.load();
            }
        },
        type: 'pie',
        angleField: 'purchases',
        showInLegend: true,
        label: {
            field: 'category',
            display: 'rotate',
            contrast: true,
            font: '18px Arial'
        }
    }]
});
});