extjs - Sencha 图表未显示在 View 中

Question

在我看来，我定义了以下变量:

      var chartq = new Ext.chart.Chart({
      renderTo : Ext.getBody(), 
      xtype: 'chart',
      animate: true,
        width : 400,
        height : 300,
        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
            }]
        },
        axes: [{
            type: 'numeric',
            position: 'left',
            title: {
                text: 'Sample Values',
                fontSize: 15
            },
            fields: 'data1'
        }, {
            type: 'category',
            position: 'bottom',
            title: {
                text: 'Sample Values',
                fontSize: 15
            },
            fields: 'name'
        }],
        series: [{
            type: 'bar',
            xField: 'name',
            yField: 'data1',
            style: {
                fill: 'blue'
            }
        }]
    });


Ext.define('axis3.view.Chart', {

    extend: 'Ext.Panel',
    requires: ['Ext.TitleBar'],
    alias: 'widget.chartview',
    getSlideLeftTransition: function () {
        return { type: 'slide', direction: 'left' };
    },

    getSlideRightTransition: function () {
        return { type: 'slide', direction: 'right' };
    },
    config: {
        layout: {
            type: 'fit'
        },
        items: [{
                    xtype : 'label',
                    html : 'Some label.'
                        },
                {
                    xtype: 'container',
                    flex: 1,
                    items:chartq  //Ext.chart.Chart 
              },
              {
                    xtype: 'toolbar',
                    docked: 'bottom',
                },
                {
            xtype: 'titlebar',
            title: 'Axis First Stats App',
            docked: 'top',


            items: [
                {
                    xtype: 'button',
                    text: 'Log Off',
                    itemId: 'logOffButton',
                    align: 'right'
                },
                 {
                    xtype: 'button',
                    text: 'Back',
                    itemId: 'backButton',
                    align: 'left'
                },

            ],

        }],
        html: [
                    '<div id="localuid">Signed in Uid: <span>'+localStorage.uid+'</span></div>'
                ].join(""),

        listeners: [{
            delegate: '#logOffButton',
            event: 'tap',
            fn: 'onLogOffButtonTap'
        },{
            delegate: '#backButton',
            event: 'tap',
            fn: 'onBacktButtonTap'
        }]
    },
    onLogOffButtonTap: function () {
        localStorage.clear();
        window.location.reload();
    },
    onBackButtonTap: function () {

    Ext.create('axis3.view.Main',{});
     Ext.Viewport.animateActiveItem('mainview', this.getSlideRightTransition());
    },

});

当按下工具栏中的按钮时， View 会按预期激活。但是，图表不可见。控制台日志中未显示任何错误。我尝试将变量添加到配置和“项目”中，但图表仍然没有显示。 console.log 中没有错误

图表的容器正在按预期在浏览器中创建 - 只是没有出现图表

有人可以告诉我我缺少什么吗？

Answer 1

图表在正确呈现之前需要宽度和高度。我为您的 chartq 添加了静态宽度和高度定义，它出现如我所料:

    var chartq = new Ext.chart.Chart({
        width: 100,
        height: 100,
        store: {...