Question

我在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 by status

要显示每个饼图，我点击面板上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。

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

ExtJS 4.1 - 饼图刷新

1 个答案: