javascript - ExtJS 4.1-饼图刷新

我在ExtJS 4.1上的饼图有一些问题。

我通过Ajax和Json加载了数据存储区：

Ext.define('MyModel', {
    extend: 'Ext.data.Model',
    fields: ['status', 'data', 'data1', 'data2']
});

var store1 = Ext.create('Ext.data.JsonStore', {
    model: 'MyModel',
    proxy: {
        type: 'ajax',
        url : 'PieChartJsonServlet',
    },
    autoLoad: true
});

我想显示代表以下内容的饼图：
1）数据按状态
2）data1按状态
3）data2按状态

要显示每个饼图，请单击面板上tbar上的按钮。

当我加载HTML页面时，第一个图表（按状态显示的数据）已正确加载并显示。

我的问题是从tbar单击按钮后，数据似乎已加载，但饼图未刷新！ （当我突出显示切片时，我会显示已加载的数据，并且看到数据已正确加载）

我的代码：

Ext.require('Ext.chart.*');
Ext.require(['Ext.layout.container.Fit', 'Ext.window.MessageBox']);
Ext.require('Ext.JSON.*');

Ext.onReady(function () {
Ext.define('MyModel', {
    extend: 'Ext.data.Model',
    fields: ['status', 'data', 'data1', 'data2']
});

var store1 = Ext.create('Ext.data.JsonStore', {
    model: 'MyModel',
    proxy: {
        type: 'ajax',
        url : 'PieChartJsonServlet',
    },
    autoLoad: true
});

var titlePieChart = 'Data by status',
dataToDisplay = 'data',
highlightToDisplay = ' data',
chart = Ext.create('Ext.chart.Chart', {
    xtype: 'chart',
    animate: true,
    store: store1,
    shadow: true,
    legend: {
        position: 'right'
    },
    insetPadding: 60,
    theme: 'Base:gradients',
    items: [{
        type  : 'text',
        text  : titlePieChart,
        font  : '18px Arial',
        width : 100,
        height: 30,
        x : 155,
        y : 30
     }],
     series: [{
        type: 'pie',
        field: dataToDisplay,
        showInLegend: true,
        tips: {
          trackMouse: true,
          width: 180,
          height: 35,
          renderer: function(storeItem, item) {
              var total = 0;
              store1.each(function(rec) {
                  total += rec.get(dataToDisplay);
              });
              this.setTitle(storeItem.get('status') + ' : ' + storeItem.get(dataToDisplay) + highlightToDisplay + '\n(' + Math.round(storeItem.get(dataToDisplay) / total * 100) + '%)');
          }
        },
        highlight: {
          segment: {
            margin: 20
          }
        },
        label: {
            field: 'status',
            display: 'rotate',
            font: '18px Arial',
        }
    }]
});

var panel1 = Ext.create('widget.panel', {
    width: 600,
    height: 500,
    renderTo: 'chartCmp',
    layout: 'fit',
    tbar: [{
        text: 'Data',
            handler: function(button, evt) {
            titlePieChart = 'Data by status',
            dataToDisplay = 'data';
            highlightToDisplay = ' data',
            chart.refresh(); // Doesnt' work !
        }
    }, {
        text: 'Data 1',
        handler: function(button, evt) {
            titlePieChart = 'Data1 by status',
            dataToDisplay = 'data1';
            highlightToDisplay = ' data1',
            chart.refresh(); // Doesnt' work !
        }
    }, {
        text: 'Data 2',
        handler: function(button, evt) {
            titlePieChart = 'Data2 by status',
            dataToDisplay = 'data2';
            highlightToDisplay = ' data2',
            chart.refresh(); // Doesnt' work !
        }
    }],
    items: chart
});
});

每行“ chart.refresh（）;”从tbar无法正常工作，而我想刷新一下图表。

有关信息，我在Java Web应用程序上使用ExtJS 4.1。

最佳答案

使用tbar的以下代码行，它可以工作：

tbar: [{
    text: 'Data',
        handler: function(button, evt) {
        titlePieChart = 'Data by status',
        dataToDisplay = 'data';
        chart.series.first().field = dataToDisplay,
        highlightToDisplay = ' data',
        chart.refresh();
    }
}, {
    text: 'Data 1',
    handler: function(button, evt) {
        titlePieChart = 'Data1 by status',
        dataToDisplay = 'data1';
        chart.series.first().field = dataToDisplay,
        highlightToDisplay = ' data1',
        chart.refresh();
    }
}, {
    text: 'Data 2',
    handler: function(button, evt) {
        titlePieChart = 'Data2 by status',
        dataToDisplay = 'data2';
        chart.series.first().field = dataToDisplay,
        highlightToDisplay = ' data2',
        chart.refresh();
    }
}],

关于javascript - ExtJS 4.1-饼图刷新，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/13230159/