餅圖不使用遠程存儲呈現（使用靜態存儲）

Question

我有一個Ext.chart餅圖，正在嘗試加載數據，但是有點麻煩。

下面的靜態存儲可以正常工作：

this.myDataStore = Ext.create('Ext.data.JsonStore', {
            fields: ['COUNTY', 'AMOUNT' ],
            data: [
                { COUNTY: 'London', AMOUNT: 10.92 },
                { COUNTY: 'Lancashire ', AMOUNT: 6.61 },
                { COUNTY: 'Kent', AMOUNT: 5.26 },
                { COUNTY: 'West Yorkshire', AMOUNT: 4.52 },
                { COUNTY: 'Nottinghamshire', AMOUNT: 4.01 },
                { COUNTY: 'Others', AMOUNT: 68.68 }
            ]
        });

但是不是嗎？

    Ext.define('counties', {
        extend: 'Ext.data.Model',
        fields: [
            {name: 'COUNTY', type: 'string'},
            {name: 'AMOUNT', type: 'float'}
        ]
    });

    this.myDataStore = Ext.create('Ext.data.JsonStore', {
        model: 'counties',
        proxy: {
            type: 'ajax',
            url : '/dashboard/countytotals?percentage=true',
            reader: {
                type: 'json',
                root: 'data'                    
            }
        },
        autoLoad: true
    });

我只是得到一個空白圖或未定義...？

當我使用Data.Store（而不是JsonStore）時，我可以看到餅圖周圍的縣，但是中間的彩色圖表不見了，並且在下面使用Data.Store：

Ext.define('APP.store.Countytotalsgraph', {
    extend: 'Ext.data.Store',
    model: 'APP.model.Countytotalsgraph',
    autoLoad: true,
    storeId: 'countyTotalsGraphStore',

    proxy: {
        type: 'ajax',
        format: 'json',
        api: {
            read   : '/dashboard/countytotals'
        },
        reader: {
            type: 'json',
            root: 'data',
            //rootProperty: 'data',
            successProperty: 'success'
        }
    },

    listeners: {
        beforeload: function(store, eOpts) {
            //if ( this.data.items.length ) {
            //Ext.getCmp('optionsGrid').getView().refresh();
            //}
            store.proxy.extraParams = {
                percentage: 'true'
            }
        }
    }
});

上面的代碼片段產生了以下內容：

我的數據庫返回的json格式如下：

{"success":true,"data":[{"COUNTY":"London ","AMOUNT":10.92},{"COUNTY":"Lancashire","AMOUNT":6.61},{"COUNTY":"Kent ","AMOUNT":5.26},{"COUNTY":"West Yorkshire","AMOUNT":4.52},{"COUNTY":"Nottinghamshire","AMOUNT":4.01},{"COUNTY":"Other","AMOUNT":68.68}]}

第一個代碼段顯示了一個漂亮的圖形，其他代碼則沒有，你們能發現問題嗎？

在此先感謝:)內森

完整的圖表代碼

Ext.define('APP.view.core.graphs.Countytotals', {
    extend: 'Ext.Panel',
    alias: 'widget.gridportlet',
    id: 'countyTotalsGraph',
    xtype: 'pie-basic',


    width: 650,

    initComponent: function() {
        var me = this;

        Ext.define('counties', {
            extend: 'Ext.data.Model',
            allowNull: true,
            fields: ['COUNTY', 'AMOUNT']
        });

        this.myDataStore = Ext.create('Ext.data.JsonStore', {
            model: 'counties',
            proxy: {
                type: 'ajax',
                url : '/dashboard/countytotals?percentage=true',
                reader: {
                    type: 'json',
                    root: 'data'
                }
            },
            autoLoad: false
        });

        this.listeners = {
            afterrender: function(){
                console.log('asdsadasd');
                this.myDataStore.load();
            }
        };

        /*this.myDataStore = Ext.create('Ext.data.JsonStore', {
            fields: ['COUNTY', 'AMOUNT' ],
            data: [
                { COUNTY: 'London', AMOUNT: 10.92 },
                { COUNTY: 'Lancashire ', AMOUNT: 6.61 },
                { COUNTY: 'Kent', AMOUNT: 5.26 },
                { COUNTY: 'West Yorkshire', AMOUNT: 4.52 },
                { COUNTY: 'Nottinghamshire', AMOUNT: 4.01 },
                { COUNTY: 'Others', AMOUNT: 68.68 }
            ]
        });*/

        console.log(this.myDataStore.getData());

        me.items = [{
            xtype: 'polar',
            width: '100%',
            height: 500,
            store: this.myDataStore,
            insetPadding: 50,
            innerPadding: 20,
            legend: {
                docked: 'bottom'
            },
            interactions: ['rotate', 'itemhighlight'],
            /*sprites: [{
                type: 'text',
                text: 'Pie Charts - Basic',
                font: '22px Helvetica',
                width: 100,
                height: 30,
                x: 40, // the sprite x position
                y: 20  // the sprite y position
            }, {
                type: 'text',
                text: 'Data: Top 5 Counties',
                font: '10px Helvetica',
                x: 12,
                y: 425
            }, {
                type: 'text',
                text: 'Source: Database',
                font: '10px Helvetica',
                x: 12,
                y: 435
            }],*/
            series: [{
                type: 'pie',
                angleField: 'AMOUNT',
                label: {
                    field: 'COUNTY',
                    display: 'outside',
                    calloutLine: {
                        length: 60,
                        width: 3
                        // specifying 'color' is also possible here
                    }
                },
                highlight: true,
                tooltip: {
                    trackMouse: true,
                    renderer: function(storeItem, item) {
                        this.setHtml(storeItem.get('COUNTY') + ': ' + storeItem.get('AMOUNT') + '%');
                    }
                }
            }]
        }];

        this.callParent();
    }
});

在瀏覽器中請求

Answer 1

我只注意到您在數據庫的json末尾有以下內容

{"COUNTY":"Other","AMOUNT":68.68}]}{"COUNTY":"Other","AMOUNT":68.68}]}

我想“其他”應該只出現一次？

兩個“其他”條目之間似乎也缺少逗號。

Answer 2

默認情況下沒有float 字段類型 ； 那應該是number 。 這可能就是為什么在第二個示例中只解析一半數據的原因。