1

次のような定義済みの円グラフがあります。

Ext.create('Ext.chart.Chart', {
        width : 450,
        height : 300,
        animate : true,
        store : store,
        theme : 'Base:gradients',
        series : [{
            type : 'pie',
            field : 'data1',
            showInLegend : true,
            tips : {
                trackMouse : true,
                width : 140,
                height : 28,
                renderer : function(storeItem, item) {
                    // calculate and display percentage on hover
                    var total = 0;
                    store.each(function(rec) {
                        total += rec.get('data1');
                    });
                    this.setTitle(storeItem.get('name') + ': ' + Math.round(storeItem.get('data1') / total * 100) + '%');
                }
            },
            highlight : {
                segment : {
                    margin : 20
                }
            },
            label : {
                field : 'name',
                display : 'rotate',
                contrast : true,
                font : '18px Arial'
            }
        }]
    });

次に、コンテナ/パネルを作成しました。ここでは、コンテナを使用しています。

事前定義されたチャートをコンテナに入れる方法を探しています。コンテナフィールドで実際にグラフを定義する例をいくつか見ましたが、それは私が望んでいることではありません。事前に指定したグラフをitems下のフィールドに入力して、グラフをレンダリングできるようにする方法はありますか？

Ext.create('Ext.container.Container', {
        layout: 'fit',
        width: 600,
        height: 600,
        renderTo: Ext.getBody(),
        border: 1,
        style: {boderColor: '#000000', borderStyle: 'solid', borderWidth: '1px'},
        items: [{

        }]
    });

ありがとう

4

1 に答える 1

2

はい、それは次のように簡単です：

var chart = Ext.create('Ext.chart.Chart', {
    animate: true,
    store: store,
    theme: 'Base:gradients',
    series: [{
        type: 'pie',
        field: 'data1',
        showInLegend: true,
        tips: {
            trackMouse: true,
            width: 140,
            height: 28,
            renderer: function(storeItem, item) {
                // calculate and display percentage on hover
                var total = 0;
                store.each(function(rec) {
                    total += rec.get('data1');
                });
                this.setTitle(storeItem.get('name') + ': ' + Math.round(storeItem.get('data1') / total * 100) + '%');
            }
        },
        highlight: {
            segment: {
                margin: 20
            }
        },
        label: {
            field: 'name',
            display: 'rotate',
            contrast: true,
            font: '18px Arial'
        }
    }]
});

Ext.create('Ext.container.Container', {
    layout: 'fit',
    width: 600,
    height: 600,
    renderTo: Ext.getBody(),
    border: 1,
    style: {
        boderColor: '#000000',
        borderStyle: 'solid',
        borderWidth: '1px'
    },
    items: chart
});

また、グラフはフィットレイアウトで使用されているため、グラフで寸法を指定しても意味がないことに注意してください。

于 2012-07-03T21:31:40.983 に答える