Question

我目前正在创建一个“向下钻取”式饼图，点击“切片”时，应该使用该切片内的数据更新饼图。

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

衬衫 - 10,000美元裤子 - $ 8,000 鞋子 - $ 3,500

然后点击“衬衫”切片将显示有关衬衫类别中销售的详细信息：

T恤 - $ 7,000 Polo衫 - 2,000美元背心 - $ 1,000

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

http://jsfiddle.net/informationarchitech/BrMeh/

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

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

我已经尝试了我可以在图表，商店等上找到的每个“清除”，“更新”，“重置”方法，我尝试的任何内容似乎都没有成功“完全”更新饼图数据。谁能告诉我我做错了什么？

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

0 个答案: