сенча чарт на hbox - PullRequest
Новая
       27

сенча чарт на hbox

1 голос
/ 17 февраля 2012

как я могу добавить диаграмму сенча в несколько ящиков Я новичок в 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']
                }]
            });

ищет помощи

1 Ответ

0 голосов
/ 27 февраля 2012
Например,

вы можете указать вот так

Сначала создайте одну родительскую панель, например 

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