1

Ext.chart Pie チャートがあり、データを読み込もうとしていますが、少し問題があります。

以下の静的ストアは正常に機能します。

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
    });

空白のグラフまたは未定義のグラフが表示されるだけです...?

(JsonStore の代わりに) Data.Store を使用すると、円グラフの周囲に郡が表示されますが、中央の色付きのグラフが表示されず、以下の 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();
    }
});

ブラウザでリクエスト

ここに画像の説明を入力

4

2 に答える 2

1

デフォルトではfloat フィールド タイプはありません。そうあるべきですnumber。これがおそらく、2 番目の例で解析されたデータの半分しか得られない理由です。

于 2014-07-21T14:59:48.800 に答える