hbox 上的煎茶图答案

【问题标题】：sencha chart on a hboxhbox 上的煎茶图
【发布时间】：2012-02-17 14:04:57
【问题描述】：

如何将煎茶图表添加到多个 hbox。我是 sencha touch 的新手。我需要动态创建多个 hbox 并添加不同的图表。我刚刚做了一个 hbox 布局和一个图表组件。但不知道如何将图表添加到 hbox。我的代码是

hbox 代码

var pnl = new Ext.Panel({
        width: 400,
        height: 300,
        fullscreen: true,
        layout: 'hbox',
        items: [{
            width : 200,
            height: 200,
            html: 'First',
            bodyStyle: 'background:grey;'
        },{
            width: 200,
            height: 200,
            html: 'Second',
            bodyStyle: 'background:blue;'
        },{
            width: 200,
            height: 200,
            html: 'Third',
            bodyStyle: 'background:yellow;'
        }]
    });

图表代码

new Ext.chart.Chart({
                renderTo: Ext.getBody(),
                width: 500,
                height: 300,
                animate: true,
                store: store,
                axes: [{
                    type: 'Numeric',
                    position: 'bottom',
                    fields: ['value'],
                    label: {
                    //renderer: Ext.util.Format.numberRenderer('0,0')
                    },
                    title: 'Quanitity',
                    grid: true,
                    minimum: 0
                }, {
                    type: 'Category',
                    position: 'left',
                    fields: ['product'],
                    title: 'Products'
                }],
                series: [{
                    type: 'bar',
                    axis: 'bottom',
                    highlight: true,
                    tips: {
                        trackMouse: true,
                        width: 140,
                        height: 28,
                        renderer: function(storeItem, item) {
                            this.setTitle(storeItem.get('product') + ': ' + storeItem.get('value') + ' views');
                        }
                    },
                    label: {
                        display: 'insideEnd',
                        field: 'data1',
                        //renderer: Ext.util.Format.numberRenderer('0'),
                        orientation: 'horizontal',
                        color: '#333',
                        'text-anchor': 'middle'
                    },
                    xField: 'name',
                    yField: ['value']
                }]
            });

寻求帮助

【问题讨论】：

标签： sencha-touch sencha-charts

【解决方案1】：

例如你可以这样指定

首先创建一个类似的父面板

 var Panel = new Ext.Panel({
                                      layout: 'hbox',
                                     dockedItems: {
                                                        dock: 'top',
                                                        xtype: 'toolbar',
                                                        title: 'Line & Pie chart',
                                                        items: [ ]
                                                         },
                                   items: [ LineChartPanel,PiePanel,]
                         });

现在为折线图和饼图创建单独的面板

var LineChartPanel= new Ext.chart.Chart({
 // your required stuff for the line chart
});

var PiePanel= new Ext.chart.Chart({

// your required stuff for the Pie chart
});

【讨论】：