2

ExtJS 5 に基本的な円グラフがあります。私が抱えている問題は、グラフが静的な JsonStore でレンダリングされますが、リモートの data.store では適切にレンダリングされないということですか?

これが私のコードです：

見る（チャート）

Ext.define('APP.view.core.graphs.Countytotals', {
    extend: 'Ext.Panel',
    alias: 'widget.countytotalchart',
    id: 'countyTotalsGraph',

    width: 650,

    initComponent: function() {
        var me = this;

        //  Doesn't work?
        var countyStore = Ext.create('APP.store.Countytotalsgraph');


        // Works
        var store = 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': 'Other',
                'AMOUNT': 68.68
            }]
        });

        var chart = new Ext.chart.PolarChart({
            width: '100%',
            height: 500,
            insetPadding: 50,
            innerPadding: 20,
            legend: {
                docked: 'bottom'
            },
            listeners: {
              afterrender: function (chart) {
                  if (chart.isVisible()) {
                      countyStore.load();
                      chart.redraw();
                  }
              }
            },
            interactions: ['itemhighlight'],
            store: countyStore,
            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') + '%');
                    }
                }
            }]
        });


        me.items = [chart];

        this.callParent();
    }
});

店

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

    proxy: {
        type: 'ajax',
        url : '/dashboard/countytotals',
        method : 'POST',
        reader: {
            type: 'json',
            rootProperty: 'data'
        }
    },

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

モデル

Ext.define('APP.model.Countytotalsgraph', {
    extend: 'Ext.data.Model',
    fields: ['COUNTY', 'AMOUNT']
});

これは、静的ストアでレンダリングする方法です。

静的JsonStoreを使用

これは、リモート ストアでレンダリングする方法です。

リモート Data.Store を使用

私は GPL の最新バージョンを使用していますが、チャートは Sencha CMD と sencha-charts ディレクトリの「sencha ant build」コマンドを使用して作成されています。

静的ストアには表示されるのに (下部の凡例に関してはまだ問題があります)、リモート json には表示されないのはなぜですか?

チャートがレンダリングされて表示されるようになった後、ストアをロードしようとしましたが、チャートをレンダリングする時間を与えるためにストアのロードを保留することに関する以前の投稿を見たことがありますが、これはうまくいきませんでした:

listeners: {
    afterrender: function (chart) {
        if (chart.isVisible()) {
            countyStore.load();
            chart.redraw();
        }
    }
},

前もって感謝します ：）

ネイサン

4

1 に答える 1

3

おそらくExtのバグです。

チャートの色は で設定されExt.chart.AbstractChart#updateColorsます。これは "config" メソッドであり、 が呼び出されたときに自動的にsetColors呼び出され、config が初期化されるときにコンストラクターからも呼び出されます。

あなたの場合、リモートストアがロードされる前の構築時にのみ呼び出されます。また、ポーラー シリーズでは、使用する必要がある色の数を知るために、ストア内のレコード数を知る必要があります (軸の数などに依存する他の種類のチャートとは異なります)。

そのメソッドのコードは次のとおりです。

updateColors: function (newColors) {
    var me = this,
        colors = newColors || (me.themeAttrs && me.themeAttrs.colors),
        colorIndex = 0, colorCount = colors.length, i,
        series = me.getSeries(),
        seriesCount = series && series.length,
        seriesItem, seriesColors, seriesColorCount;

    if (colorCount) {
        for (i = 0; i < seriesCount; i++) {
            seriesItem = series[i];

            // Ext.chart.series.Polar#themeColorCount uses store.getCount()
            // so seriesColorCount will be 0
            seriesColorCount = seriesItem.themeColorCount();

            // ... hence seriesColor will be an empty array
            seriesColors = me.circularCopyArray(colors, colorIndex, seriesColorCount);
            colorIndex += seriesColorCount;
            seriesItem.updateChartColors(seriesColors);
        }
    }
    me.refreshLegendStore();
}

おそらく、ストアのロード イベントの後にグラフを作成することで機能させることができますが、使用法が意図したとおりであることを考えると、それは一種の変態であり、バグはおそらく今後のリリースで解消されるでしょう。

今のところ、可能な修正は、ストアが更新されたときに呼び出されるチャートの をオーバーライドし、onRefreshこの時点で色を強制的に更新することです。

Ext.define(null, {
    override: 'Ext.chart.PolarChart'
    ,onRefresh: function() {
        this.callParent(arguments);
        var colors = this.getColors();
        if (colors) {
            this.updateColors(colors);
        }
    }
});
于 2014-07-24T20:52:14.220 に答える