将饼图添加到 Sencha Touch2 应用程序

Question

我正在尝试将饼图添加到现有的 sencha touch mvc 应用程序中，如果我将图表相关代码放在 app.js 文件中，饼图显示正常，我面临的问题是如果将图表放在单独的视图中不显示，我没有看到任何错误也被触发，请问他们有什么不同的方法来为不同的视图集成饼图吗？

这是我编写饼图代码的视图的示例代码

Ext.define('Example.view.PieChartTest', {
    extend: 'Ext.Panel',
    xtype: "piecharttestpage",
    requires: [
        'Ext.chart.Panel',
        'Ext.chart.axis.Numeric',
        'Ext.chart.axis.Category',
        'Ext.chart.series.Pie'

        ],
   intit: function () {
        //this.callParent(arguments);

        window.initExample = function (title, helpText, defaultStore) {
            defaultStore = defaultStore || 'store1';
            window.generateData = function (n, floor) {
                var data = [],
                    i;

                floor = (!floor && floor !== 0) ? 20 : floor;

                for (i = 0; i < (n || 12); i++) {
                    data.push({
                        name: Ext.Date.monthNames[i % 12],
                        data1: Math.floor(Math.max((Math.random() * 100), floor)),
                        data2: Math.floor(Math.max((Math.random() * 100), floor)),
                        data3: Math.floor(Math.max((Math.random() * 100), floor)),
                        2003: Math.floor(Math.max((Math.random() * 100), floor)),
                        2004: Math.floor(Math.max((Math.random() * 100), floor)),
                        2005: Math.floor(Math.max((Math.random() * 100), floor)),
                        2006: Math.floor(Math.max((Math.random() * 100), floor)),
                        2007: Math.floor(Math.max((Math.random() * 100), floor)),
                        2008: Math.floor(Math.max((Math.random() * 100), floor)),
                        2009: Math.floor(Math.max((Math.random() * 100), floor)),
                        2010: Math.floor(Math.max((Math.random() * 100), floor)),
                        iphone: Math.floor(Math.max((Math.random() * 100), floor)),
                        android: Math.floor(Math.max((Math.random() * 100), floor)),
                        ipad: Math.floor(Math.max((Math.random() * 100), floor))
                    });
                }
                return data;
            };

            window.store1 = new Ext.create('Ext.data.JsonStore', {
                fields: ['name', '2004', '2005', '2006', '2007', '2008', '2009', '2010', 'iphone', 'android', 'ipad'],
                data: generateData(5, 20)
            });

            window.store2 = new Ext.data.JsonStore({
                fields: ['name', '2008', '2009', '2010', 'data4', 'data5', 'data6', 'data7', 'data8', 'data9'],
                data: generateData(6, 20)
            });

            window.store3 = new Ext.data.JsonStore({
                fields: ['name', '2007', '2008', '2009', '2010'],
                data: generateData(12, 20)
            });

            var onRefreshTap = function () {
                window[defaultStore].setData(generateData(window[defaultStore].data.length, 20));
            };


            var onHelpTap = function () {
                window.helpPanel = window.helpPanel || Ext.create('Ext.Panel', {
                    ui: 'dark',
                    modal: true,
                    fullscreen: false,
                    hideOnMaskTap: true,
                    centered: true,
                    width: 300,
                    height: 250,
                    styleHtmlContent: true,
                    scrollable: 'vertical',
                    zIndex: 100,
                    items: [
                        {
                            docked: 'top',
                            xtype: 'toolbar',
                            title: title
                        },
                        {
                            html: helpText,
                            hidden: !helpText
                        }
                    ]
                });
                window.helpPanel.show('pop');
            };

            window.createPanel = function (chart) {
                return window.panel = Ext.create('Ext.chart.Panel', {
                    fullscreen: true,
                    title: title,
                    buttons: [
                        {
                            xtype: 'button',
                            iconCls: 'help',
                            iconMask: true,
                            ui: 'plain',
                            handler: onHelpTap
                        },
                        {
                            xtype: 'button',
                            iconCls: 'shuffle',
                            iconMask: true,
                            ui: 'plain',
                            handler: onRefreshTap
                        }
                    ],
                    chart: chart
                });
            };
        };


      window.createPanel(new Ext.chart.Chart({
            themeCls: 'pie1',
            theme: 'Demo',
            store: store1,

            shadow: false,
            animate: true,
            insetPadding: 20,
            legend: {
                position: 'left'
            },
            interactions: [{
                type: 'piegrouping',
                listeners: {
                    selectionchange: function (interaction, selectedItems) {
                        var sum = 0,
                i = selectedItems.length;
                        if (i) {
                            while (i--) {
                                sum += selectedItems[i].storeItem.get('visitors');
                            }
                            window.chartPanel.descriptionPanel.setTitle('Total visitors: ' + sum);
                            window.chartPanel.headerPanel.setActiveItem(1, { type: 'slide', direction: 'left' });
                        }
                        else {
                            window.chartPanel.headerPanel.setActiveItem(0, { type: 'slide', direction: 'right' });
                        }
                    }
                }
            }],
            series: [
                {
                    type: 'pie',
                    field: '2007',
                    showInLegend: true,
                    highlight: false,
                    listeners: {
                        'labelOverflow': function (label, item) {
                            item.useCallout = true;
                        }
                    },
                    // Example to return as soon as styling arrives for callouts
                    callouts: {
                        renderer: function (callout, storeItem) {
                            callout.label.setAttributes({
                                text: storeItem.get('name')
                            }, true);
                        },
                        filter: function () {
                            return false;
                        },
                        box: {
                        //no config here.
                    },
                    lines: {
                        'stroke-width': 2,
                        offsetFromViz: 20
                    },
                    label: {
                        font: 'italic 14px Arial'
                    },
                    styles: {
                        font: '14px Arial'
                    }
                },
                label: {
                    field: 'name'
                }
            }
            ]
        }));
       // this.add(chartpanel);

    },

    config: {
        title: 'info',
        iconCls: 'star',
        scrollable: true,
        cls: 'servicesclass',
        layout: 'vbox',
        height: 500,
        width: 500,
        autoDestroy: true

    }
});

Answer 1

我知道这个问题，您可以通过转换变量来解决它。在您的视图部分尝试下面的代码并将应用程序的名称更改为您的应用程序

generateData = function(n) {
    var data = [];
    var names = ['one', 'two', 'three', 'four'];
    var i;
    for (i = 0; i < n; i++) {
        data.push({description: names[i], value: 3 + i}); //pushes data onto the data array by looping, value is a funciton of i
    }
    return data;
};

var myStore = new Ext.create('Ext.data.Store', {
    fields: ['description', 'value'],
    data: generateData(4)
});

var chart1 =  new Ext.create('Ext.chart.Chart', {

store: myStore, //the store that it will use
height: 480,
width: 320,
    series: [{
        type: 'pie',
        showInLegend: true,
        field: 'value',
        label: { //the label inside each pie
            field: 'description',
            font: '20px Arial',
            display: 'rotate',
            contrast: true
        },
    }],
});



Ext.define('MyApp.view.panel1', {


extend: 'Ext.chart.Panel',

    alias: 'widget.Panel1',

    config:
    {   
        chart: chart1 //displays the chart
    }
});

在 App.js 文件中输入此面板的名称，即 Panel1

Ext.Loader.setConfig({

    enabled: true
});

Ext.application({

    views: [
        'panel1',


    ],
    name: 'MyApp',
    controllers: [
        'your controller name'
    ],

 // include this one only if you have MainNav
    launch: function() {

        Ext.create('MyApp.view.MainNav', {fullscreen: true});
    }

});

这个对我有用。

Answer 2

首先确保您引用的是 sencha touch 发行版中的 sencha touch 库，而不是您可以在 html 中下载的主 sencha touch 库。

其次，如果您使用 MVCS 文件夹并学习如何使用 ST2 中的新引用，您将省去很多麻烦，这将使调试变得容易 1000 倍。

你也在使用全局变量（窗口）？？