Question

我有一个饼图如下

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();
})

由于

extjs饼图不刷新

0 个答案: