0

我有一个饼图如下

var donut = false,
    panel1 = Ext.create('widget.panel', {
    width: 500,
    height: 350,
    title: 'Semester Trends',
    renderTo: Ext.getBody(),
    layout: 'fit',
    items: {
        xtype: 'chart',
        id: 'chartCmp',
        animate: true,
        store: store,
        shadow: true,
        legend: {
            position: 'right'
        },
        insetPadding: 60,
        theme: 'Base:gradients',
        series: [{
            type: 'pie',
            field: 'sales',
            showInLegend: true,
            donut: donut,
            tips: {
              trackMouse: true,
              width: 140,
              height: 28,
              renderer: function(storeItem, item) {
                //calculate percentage.
                var total = 0;
                store.each(function(rec) {
                    total += rec.get('sales');
                });
                this.setTitle(storeItem.get('month') + ': ' + Math.round(storeItem.get('sales') / total * 100) + '%');
              }
            },
            highlight: {
              segment: {
                margin: 20
              }
            },
            label: {
                field: 'month',
                display: 'rotate',
                contrast: true,
                font: '18px Arial'
            }
        }]
    }
});

这个饼图效果很好。然而有一个问题。

当我单击提交按钮为饼图生成数据时，饼图就生成了。

第一次点击按钮。我得到了 5 个值，所以饼上有 5 个饼和 5 个标签。第二次点击，我只得到 2 个值，所以有 2 个饼图，但我没有得到 2 个标签，而是看到 5 个标签。

问题是，我在第二次点击时没有的那 3 个标签应该被删除。我该怎么做？

我什至使用下面的代码来刷新图表，但它仍然不起作用。

store.load(function(){
  chart.redraw();


});

谁能帮我刷新我的图表？我相信这些标签以某种方式缓存，因为第二次单击只有 2 个数据值和 2 个名称与之关联。

更新：

Ext.define('PieC'.{
extend: 'Ext.data.Model',
fields:['month', 'sales']
});


var store = Ext.create('Ext.data.Store',{
 model:'PieC',
 autoLoad:true,
 proxy:{
   type:ajax,
   url:'',
   reader:{
        type: 'xml',
        record: 'record'
 }
}
});

更新商店

store.proxy.url ='url here ',
store.load(function(){
chart.redraw();
})

谢谢

4

0 回答 0