1

Sencha Touch 2.1で、動的フィールドストア、チャート軸、チャートシリーズを使用して、jsonからチャートを動的にロードするにはどうすればよいですか？

多分これは多すぎると思いますが、多くの種類のデータを表示する必要があります。表示ごとに1つのグラフコンポーネントを作成すると、15を超えるグラフコンポーネントを作成する必要があり、肥大化するのではないかと心配しています。

4

2 に答える 2

1

私はこれを動的に完了しませんでしたが、動的に見えるようにしました。

まず、ユーザーにフォームへの記入を依頼します。

また、いくつかの異なるレイアウトの形式で、空のストアを持つチャートを保持する複数のパネルがあります。

ユーザーのフォームに基づいて、必要なデータをストアにロードした後にのみ表示する必要がある場合に、パネルまたはチャートを表示および非表示にします。

はい、かさばり、静的ですが、動的にロードするよりも処理が少し簡単であることがわかりました。

編集

考えた後、

次のような機能を試しましたか

function dynamiccharts(var1, var2, var3){

return Ext.chart.Chart({
 ....
})

}

変数には、データ、URL、ストアなどが含まれます。

于 2012-11-16T20:30:51.997 に答える
0

これは、パネル内のコントローラーでグラフを作成する私の例です。軸、系列、ストアフィールド、URLはパラメーターになり、PAR_FORMはビュー間の違いを示すグローバル変数であり、このコードを別のグラフ（列、円）に使用しています。

Ext.define("Geis.controller.app", {
extend: "Ext.app.Controller",
config: {
    refs: {
        mainview: 'mainview',
        barchartview: 'barchartview',
        btnShowChartAnggaran: '#btnShowChartAnggaran'
    },
    control: {
        'btnShowChartAnggaran': {
            tap: 'onShowChartAnggaran'
        }
    }
}

createBarChart: function(fields, series_xfield, series_yfield, url) {
    this.getBarchartview().add(new Ext.chart.CartesianChart({
        id: 'barchartgenerateview',
        store: {
            fields: fields,
            proxy: {
                type: 'jsonp',
                url: url
            }
        },
        background: 'white',
        flipXY: true,
        colors: Geis.view.ColorPatterns.getBaseColors(),
        interactions: [
            {
                type: 'panzoom',
                axes: {
                    "left": {
                        allowPan: true,
                        allowZoom: true
                    },
                    "bottom": {
                        allowPan: true,
                        allowZoom: true
                    }
                }
            },
            'itemhighlight'
        ],
        series: [{
            type: 'bar',
            xField: series_xfield,
            yField: series_yfield,
            highlightCfg: {
                strokeStyle: 'red',
                lineWidth: 3
            },
            style: {
                stroke: 'rgb(40,40,40)',
                maxBarWidth: 30
            }
        }],
        axes: [{
            type: 'numeric',
            position: 'bottom',
            fields: series_yfield,
            grid: {
                odd: {
                    fill: '#e8e8e8'
                }
            },
            label: {
                rotate: {
                    degrees: -30
                }
            },
            maxZoom: 1
        },
        {
            type: 'category',
            position: 'left',
            fields: series_xfield,
            maxZoom: 4
        }]
    }));
    Ext.getCmp('barchartgenerateview').getStore().load();
},

onShowChartAnggaran: function() {
    this.getBarchartview().remove(Ext.getCmp('barchartgenerateview'), true);
    if (PAR_FORM == 'Dana Anggaran') {
        this.createBarChart(['kode', 'keterangan', 'nilai'], 'keterangan', 'nilai', 
            Geis.util.Config.getBaseUrl() + 'anggaran/laporan/json/get_dana_anggaran_json/');
    } else if (PAR_FORM == 'Alokasi Anggaran') {
        this.createBarChart(['kode', 'keterangan', 'belanja_pegawai', 'belanja_barang', 'belanja_modal'], 
            'keterangan', ['belanja_pegawai', 'belanja_barang', 'belanja_modal'], 
            Geis.util.Config.getBaseUrl() + 'anggaran/laporan/json/get_alokasi_json/');
    }

    this.getMainview().animateActiveItem(1, {type:'slide', direction:'left'});
}

}）;

インタラクション機能をアクティブにする場合は、たとえばグローバルカウンター変数を作成して、チャートIDも動的に設定する必要があるという私の実験に基づいています。

于 2012-11-21T05:58:55.853 に答える