2

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();」from tbar は機能しませんが、更新されたチャートが必要です。

参考までに、私は Java Web アプリケーションで ExtJS 4.1 を使用しています。

4

1 に答える 1

2

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();
    }
}],
于 2012-11-07T18:20:00.350 に答える