我正在尝试将饼图添加到现有的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
}
});
答案 0 :(得分：1)
首先确保您在sencha触摸分配中引用了sencha触摸库，而不是您可以在html中下载的主要sencha触摸库。
其次，如果您使用MVCS文件夹并学习如何在ST2中使用新引用，那么您将为自己省去很多麻烦，它将使调试变得更容易1000次。
你也在使用全局（窗口。）??
答案 1 :(得分：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});
}
});
这个对我有用。