Question

我正在尝试按照this示例创建饼图。

我添加了一些简单的代码来创建工具栏并将其停靠在视图的顶部，但仍然使用上面链接的示例中的代码。这样做会使图表无法显示。我只是得到一个空白页。

我的代码粘贴在下面：

        Ext.define('RevivalTimes.view.Chart', {
            extend: 'Ext.chart.PolarChart',
            xtype: 'chart',

            requires: [
                'Ext.chart.series.Pie',
                'Ext.chart.interactions.Rotate'
            ],

            config: {
                title: 'Statistics',
                iconCls: 'settings',

                layout: 'fit',

/**************** This toolbar causes the second error - disappearing chart **************/
                items: [{
                    docked: 'top',
                    xtype: 'toolbar',
                    title: 'Statistics Chart',
                    items :[
                        {
                            align : 'left',
                            name : 'nav_btn',
                            iconCls : 'list',
                            iconMask: true,
                            ui : 'plain',
                        },
                        {
                            align : 'right',
                            name : 'user_btn',
                            iconCls : 'user',
                            iconMask: true,
                            ui : 'plain',
                        }
                    ]
                }],
    /**********************************************************************/

                animate: true,
                interactions: ['rotate'],
                colors: ['#115fa6', '#94ae0a', '#a61120', '#ff8809', '#ffd13e'],
                store: {
                  fields: ['name', 'data1', 'data2', 'data3', 'data4', 'data5'],
                  data: [
                      {name: 'metric one',   data1: 10, data2: 12, data3: 14, data4: 8,  data5: 13},
                      {name: 'metric two',   data1: 7,  data2: 8,  data3: 16, data4: 10, data5: 3},
                      {name: 'metric three', data1: 5,  data2: 2,  data3: 14, data4: 12, data5: 7},
                      {name: 'metric four',  data1: 2,  data2: 14, data3: 6,  data4: 1,  data5: 23},
                      {name: 'metric five',  data1: 27, data2: 38, data3: 36, data4: 13, data5: 33}
                  ]
                },
                series: [{
                    type: 'pie',
                    label: {
                        field: 'name',
                        display: 'rotate'
                    },
                    xField: 'data3',
                    donut: 30
                }]

            } //config
        });

当我访问图表视图时，出现以下错误：

未捕获TypeError：对象[object Object]没有方法＆＃39; renderFrame＆＃39;

更新

我应该解释一下，我没有使用默认的tabbar进行导航。我按照this教程实现了幻灯片导航。

我使用以下控制器代码切换视图：

    Ext.define('RevivalTimes.controller.Navigation', {
    extend: 'Ext.app.Controller',

    config: {

        refs: {
            main: 'main',
            navigation : 'navigation',
        },

        control: {
            "button[name='nav_btn']": {
                tap: 'toggleNav'
            },
            navigation : {
                itemtap : function(list, index, target, record){
                    this.toggleNav();

                    // console.debug('LIST: ' + list);
                    // console.log('INDEX: ' + index);
                    // console.error('TARGET: ' + target.toSource());
                    // console.warn('RECORD: ' + record);

                    // JSON.stringify(target);

                    switch(index){
                        case 0: 
                            this.getMain().setActiveItem(0);
                            break;
                        case 1: 
                            this.getMain().setActiveItem({xtype:'messagesview'});
                            break;
                        case 2:
                            this.getMain().setActiveItem({xtype:'articleslistview'});
                            break;
                        case 3:
                            this.getMain().setActiveItem({xtype:'categoriesview'});
                            break;
                        case 4:
                            // this.getMain().setActiveItem({xtype:'chart'});
                            this.getMain().setActiveItem({xtype:'chartcontainer'});
                            break;
                        default:
                            break;
                    }
                }
            }
        }

    },

    toggleNav: function(){
        // console.log('responding!');
        var me = this;
        mainEl = me.getMain().element;

        if (mainEl.hasCls('out')) {
            mainEl.removeCls('out').addCls('in'); 
            me.getMain().setMasked(false);
        } else {
            mainEl.removeCls('in').addCls('out');  
            me.getMain().setMasked(true);
        }
    }

});

当我选择幻灯片导航中的最后一个选项时，视图会成功更改，但饼图无法加载，如上所述。

Answer 1

试试这个： -

Ext.define('RevivalTimes.view.Main', {
    extend: 'Ext.Container',
    xtype: 'main',       
    config: {
        layout: 'fit',
        items: [{
            docked: 'top',
            xtype: 'toolbar',
            title: 'Statistics Chart',
            items :[
            {
                align : 'left',
                name : 'nav_btn',
                iconCls : 'list',
                iconMask: true,
                ui : 'plain'
            },
            {
                align : 'right',
                name : 'user_btn',
                iconCls : 'user',
                iconMask: true,
                ui : 'plain'
            }
            ]
        },{
            xtype: 'chart'
        }]
    }
});

Sencha Touch 2饼图未显示

1 个答案: