添加饼图到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 
    } 
}); 

啧该面板的名称即Panel1的在App.js文件

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

首先确保你引用煎茶触摸分布内部的煎茶触摸库视图的示例代码，而不是主要煎茶触摸库，你可以下载在你的HTML。

其次，如果您使用MVCS文件夹并学习如何在ST2中使用新引用，那么您将为自己节省很多头痛，并且它将使调试更容易1000倍。

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