Extjs Sencha图表未显示在视图中

在视图的顶部，我定义了以下变量：

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

});

var chartq=new Ext.chart.chart({
renderTo:Ext.getBody（），
xtype:'图表'，
动画：对，
宽度：400，
身高：300，
商店：{
字段：['name'，'data1'，'data2'，'data3'，'data4'，'data5']，
数据：[{
'name'：'metric one'，
“数据1”：10，
“数据2”：12，
“数据3”：14，
“数据4”：8，
“数据5”：13
}, {
'name'：'metric two'，
“数据1”：7，
“数据2”：8，
“数据3”：16，
“数据4”：10，
“数据5”：3
}, {
'name'：'metric three'，
“数据1”：5，
“数据2”：2，
“数据3”：14，
“数据4”：12，
“数据5”：7
}, {
'name'：'metric four'，
“数据1”：2，
“数据2”：14，
“数据3”：6，
“数据4”：1，
“数据5”：23
}, {
'name'：'metric five'，
“数据1”：27，
“数据2”：38，
“数据3”：36，
“数据4”：13，
“数据5”：33
}]
},
轴线：[{
键入：“数值”，
位置：'左'，
标题：{
文本：“示例值”，
尺寸：15
},
字段：“数据1”
}, {
类型：'类别'，
位置：'底部'，
标题：{
文本：“示例值”，
尺寸：15
},
字段：“名称”
}],
系列：[{
类型：'bar'，
xField:'名称'，
yField:'data1'，
风格：{
填充：“蓝色”
}
}]
});
Ext.define（'axis3.view.Chart'{
扩展：“Ext.Panel”，
需要：['Ext.TitleBar']，
别名：“widget.chartview”，
getSlideLeftTransition:函数（）{
返回{type:'slide'，direction:'left'}；
},
getSlideRightTransition:函数（）{
返回{type:'slide'，direction:'right'}；
},
配置：{
布局：{
类型：“适合”
},
项目：[{
xtype:'标签'，
html:“一些标签。”
},
{
xtype:'容器'，
弹性：1，
项目：chartq//Ext.chart.chart
},
{
xtype:'工具栏'，
停靠：“底部”，
},
{
xtype:'标题栏'，
标题：“Axis First Stats应用程序”，
停靠：“顶部”，
项目：[
{
xtype:'按钮'，
文本：“注销”，
itemId:“注销按钮”，
对齐：“右”
},
{
xtype:'按钮'，
文本：“返回”，
itemId:“backButton”，
对齐：“左”
},
],
}],
html:[
'已登录Uid:'+localStorage.Uid+'
].加入（“”），
听众：[{
代表：“#注销按钮”，
事件：“点击”，
fn:“onLogOffButtonTap”
},{
代表：“#backButton”，
事件：“点击”，
fn:“onBacktButtonTap”
}]
},
onLogOffButtonTap:函数（）{
localStorage.clear（）；
window.location.reload（）；
},
onBackButtonTap:函数（）{
Ext.create（'axis3.view.Main'，{}）；
animateActiveItem（'mainview'，this.getSlideRightTransition（））；
},
});

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

正在按预期在浏览器中创建图表的容器-只是没有显示任何图形

---

有人能告诉我我遗漏了什么吗？

图表需要一个宽度和高度才能正确渲染。我在您的

chartq

定义中添加了一个静态宽度和高度，它的外观与我预期的一样：

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

---

从显示的代码中不清楚视图是如何使用该图表的。你能创建一个JSFIDLE来演示这个问题吗？谢谢@sherb。我已经添加了我正在使用的完整代码。你的建议被添加了，但我想我还有别的想法missing@JezD，两个问题：（1）我看到了

chartButton

的声明，但该按钮的处理程序在哪里，以及（2）对

chartq

的引用在哪里？感谢您的回复。对于这个视图，按钮实际上是多余的。它是从另一个复制的。当视图处于活动状态时，我需要图表在那里。我尝试过在不同的地方引用chartq，包括html:和config->items，但都没有用；我猜您的代码示例是一个更大的程序的一部分，您正在尝试缩减它。我将原始的

chartq

声明（带宽度和高度）放入

视口中，它呈现得很好，因此问题出在容器中，而不是图表中。我确信您只能将
DomHelper
对象附加到
html
，因此这可能是开始的地方。谢谢。我刚在iPad上检查过，它看起来很好。所以，只有桌面不喜欢它。