饼图未使用远程存储进行渲染（使用静态存储）

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 field type;那应该是number。这可能就是为什么你在第二个例子中只解析了一半数据的原因。