使用Sencha Touch 2创建图表?

时间:2023-01-31 18:29:00

I'm trying to add an chart to my Sencha Touch app.

我正在尝试将图表添加到我的Sencha Touch应用程序中。

I have added a view like this and inserted a chart how I saw it on a couple of sites:

我添加了一个这样的视图,并插入了一个图表,我在几个网站上看到了它:

Ext.define('dergraph.view.Graph', {
    extend: 'Ext.Container',
    xtype: 'graph',
    requires: [
        'Ext.TitleBar'
    ],
    config: {
        tabBarPosition: 'bottom',
        layout: 'fit',

        items: [
            {
                xtype: 'chart',
                animate: true,
                store: 'dergraph.store.PhoneBook',
                legend: {
                    position: 'right'
                },

                axes: [{
                        type: 'Category',
                        fields: ['firstName'],
                        position: 'bottom', //x-axis
                        title: 'Category'
                    }, {
                        type: 'Numeric',
                        fields: ['value'],
                        position: 'left', //y-axis
                        title: 'Value'
                }]
            }
        ]
    }
});

But now I got in an Error in the Console of the browser: Uncaught Error: [Ext.createByAlias] Cannot create an instance of unrecognized alias: axis.Category.

但现在我在浏览器的控制台中出现错误:未捕获错误:[Ext.createByAlias]无法创建无法识别的别名实例:axis.Category。

This is my require-part in the app.js:

这是我在app.js中的要求部分:

requires: [
        'Ext.MessageBox',
        'Ext.dataview.List',
        'Ext.chart.Chart',
        'Ext.chart.axis.Numeric',
        'Ext.chart.axis.Category'
],

Can somebody help me with this?

有人可以帮我这个吗?

2 个解决方案

#1


1  

The type, xtype, etc. are case-sensitive, and the ones in the library are all lowercase.

type,xtype等区分大小写,库中的小写都是小写的。

So change type: 'Category' to type: 'category', and type: 'Numeric' to type: 'numeric', and your code will run.

因此更改类型:'类别'键入:'category',并键入:'Numeric'键入:'numeric',您的代码将运行。

You should also read the doc about xtype. This option is used to indicate the type of component to create without having to use the new keyword yourself (allowing lazy initialization). The xtype option is only meaningful in the context of an object you want to instantiate, not one you define. So this line in your code has no effect:

您还应该阅读有关xtype的文档。此选项用于指示要创建的组件类型,而无需自己使用new关键字(允许延迟初始化)。 xtype选项仅在您要实例化的对象的上下文中有意义,而不是您定义的对象。所以代码中的这一行没有效果:

xtype: 'graph',

#2


0  

did you include the Sencha Touch 2 Charts 2 Beta here? And if so, how exactly did you do that? Please start from the point after you downloaded it - I'm a rookie :)

你在这里包括Sencha Touch 2 Charts 2 Beta吗?如果是这样,你究竟是怎么做到的?请从下载后点开始 - 我是菜鸟:)

#1


1  

The type, xtype, etc. are case-sensitive, and the ones in the library are all lowercase.

type,xtype等区分大小写,库中的小写都是小写的。

So change type: 'Category' to type: 'category', and type: 'Numeric' to type: 'numeric', and your code will run.

因此更改类型:'类别'键入:'category',并键入:'Numeric'键入:'numeric',您的代码将运行。

You should also read the doc about xtype. This option is used to indicate the type of component to create without having to use the new keyword yourself (allowing lazy initialization). The xtype option is only meaningful in the context of an object you want to instantiate, not one you define. So this line in your code has no effect:

您还应该阅读有关xtype的文档。此选项用于指示要创建的组件类型,而无需自己使用new关键字(允许延迟初始化)。 xtype选项仅在您要实例化的对象的上下文中有意义,而不是您定义的对象。所以代码中的这一行没有效果:

xtype: 'graph',

#2


0  

did you include the Sencha Touch 2 Charts 2 Beta here? And if so, how exactly did you do that? Please start from the point after you downloaded it - I'm a rookie :)

你在这里包括Sencha Touch 2 Charts 2 Beta吗?如果是这样,你究竟是怎么做到的?请从下载后点开始 - 我是菜鸟:)