0

既存の 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

    }
});
4

2 に答える 2

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

});

これは私のために働きます。

于 2012-09-18T13:54:14.700 に答える
1

最初に、HTML でダウンロードできるメインの sencha touch ライブラリではなく、sencha touch ディストリビューション内の sencha touch ライブラリを参照していることを確認してください。

第二に、MVCS フォルダーを使用し、ST2 で新しい参照を使用する方法を学習すれば、頭痛の種を大幅に省くことができ、デバッグが 1000 倍簡単になります。

また、グローバル（ウィンドウ）を使用していますか??

于 2012-08-01T16:27:00.863 に答える