在 ExtJS 4 Container/Panel 中渲染图表答案

【问题标题】：Render chart in ExtJS 4 Container/Panel在 ExtJS 4 Container/Panel 中渲染图表
【发布时间】：2012-07-03 20:51:07
【问题描述】：

我有一个这样的预定义饼图：

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

然后我创建了一个 Container/Panel，这里我使用的是 Container。

我正在寻找一种将我的预定义图表放入容器的方法。我看到了一些示例，他们实际上在 Container 字段中定义了图表，但这不是我想要的。有什么方法可以将我预先指定的图表放在下面的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: [{

        }]
    });

谢谢

【问题讨论】：

标签： javascript extjs extjs4

【解决方案1】：

是的，很简单：

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

另请注意，在图表上指定尺寸是没有用的，因为它用于合适的布局。

【讨论】：