1

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

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

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

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

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

4

0 回答 0