2011-08-10 30 views
0

我是Enyo(TouchPad)的新开发人员。我想开发一个包含一些图表的应用程序。所以我试图在Enyo中使用Dojo框架库。如何在Enyo中使用Dojo代码..?

任何人都可以请帮我在如何包括我的应用程序的道场守则。 我发布我的代码,请看看。

INDEX.HTML:

<!doctype html> 
<html> 
<head> 
<title>Canvas Demo</title> 
<script src="../../../../1.0/framework/enyo.js" type="text/javascript"></script> 
<script src="lib/widget/Chart2D.js" type="text/javascript"> </SCRIPT> 
<script src="lib/chart2D.js" type="text/javascript"> </SCRIPT> 
<script src="lib/tom.js" type="text/javascript"> </SCRIPT> 
</head> 
<body> 
<script type="text/javascript"> 
enyo.create({kind: "CanvasDemo"}).renderInto(document.body); 
</script> 
</body> 
</html> 

.js文件::

enyo.kind({ 
name: "CanvasDemo", 
kind: enyo.Control, 
nodeTag: "canvas", 
domAttributes: { 
    width:"300px", 
    height:"300px", 
    style: "border: 2px solid #000;" 
}, 
// After the canvas is rendered 
rendered: function() { 

    // I want to place the dojo code here to display a chart in the canvas. 

    } 
    }); 

Dojo代码::

dojo.require('dojox.charting.Chart2D'); 
dojo.require('dojox.charting.widget.Chart2D'); 
dojo.require('dojox.charting.themes.Tom'); 

/* JSON information */ 
var json = { 
    January: [12999,14487,19803,15965,17290], 
    February: [14487,12999,15965,17290,19803], 
    March: [15965,17290,19803,12999,14487] 
}; 

/* build pie chart data */ 
var chartData = []; 
dojo.forEach(json['January'],function(item,i) { 
    chartData.push({ x: i, y: json['January'][i] }); 
}); 

/* resources are ready... */ 
dojo.ready(function() { 

    var chart2 = new dojox.charting.Chart2D('chart2'). 
        setTheme(dojox.charting.themes.Tom). 
        addPlot('default', {type: 'Pie', radius: 70, fontColor: 'black'}). 
        addSeries('Visits', chartData). 
        render(); 
    var anim = new dojox.charting.action2d.MoveSlice(chart2, 'default'); 
    chart2.render(); 

}); 

请帮我在如何修改Dojo代码,所以它可以在enyo工作..

在此先感谢。

Regards, Harry。


的index.html:

<!doctype html> 
<html> 
<head> 
<title>dojo</title> 
<script src="C:\WebOs\Development\enyo\1.0\framework\enyo.js" type="text/javascript"></script> 
<script type="text/javascript" src="C:\Users\pangulur\Downloads\dojo-release-1.6.1-src\dojo-release-1.6.1-src\dojo\dojo.js"></script> 
/head> 
<body> 
<script type="text/javascript"> 
new enyo.Canon.graphs2().renderInto(document.body); 
</script> 
</body> 
</html> 

来源/ Charts1.js:

enyo.kind({ 
name: "enyo.Canon.graphs2", 
kind: enyo.Control, 
components: [ 
    {kind: "PageHeader", content: "bargraph"}, 
    //{style: "padding: 10px", content: "Note: In the browser, you can press ctrl-~ to display the app menu."}, 
    {kind: "Button", caption: "display graph", onclick: "displayGraph", flex: 1}, 
    ], 
     displayGraph: function() { 

dojo.require('dojox.charting.Chart2D'); 
    dojo.require('dojox.charting.widget.Chart2D'); 
    dojo.require('dojox.charting.themes.PlotKit.green'); 

    /* JSON information */ 
    var json = { 
     January: [12999,14487,19803,15965,17290], 
     February: [14487,12999,15965,17290,19803], 
     March: [15965,17290,19803,12999,14487] 
    }; 

    /* build pie chart data */ 
    var chartData = []; 
    dojo.forEach(json['January'],function(item,i) { 
     chartData.push({ x: i, y: json['January'][i] }); 
    }); 

    /* resources are ready... */ 
    dojo.ready(function() { 

     //create/swap data 
     var barData = []; 
     dojo.forEach(chartData,function(item) { barData.push({ x: item['y'], y: item['x'] }); }); 
     var chart1 = new dojox.charting.Chart2D('chart1'). 
         setTheme(dojox.charting.themes.PlotKit.green). 
         addAxis('x', { fixUpper: 'major', includeZero: false, min:0, max:6 }). 
         addAxis('y', { vertical: true, fixLower: 'major', fixUpper: 'major' }). 
         addPlot('default', {type: 'Columns', gap:5 }). 
         addSeries('Visits For February', chartData, {}); 
     var anim4b = new dojox.charting.action2d.Tooltip(chart1, 'default'); 
     var anim4c = new dojox.charting.action2d.Shake(chart1,'default'); 
     chart1.render(); 
     // var legend4 = new dojox.charting.widget.Legend({ chart: chart1 }, 'legend3'); 

    }); 



} 
}); 

在这里,我不知道如何调用道场代码enyo。

depends.js:

enyo.depends(

"source/charts1.js", 
"lib/Chart2D.js", 
"lib/widget/Chart2D.js", 
"lib/blue.js", 
"lib/dojo.js" 
); 

现在,我得到了以下错误:

error: Uncaught ReferenceError: dojo is not defined, Chart2D.js:1 
    [20110818-09:33:13.136736] error: Uncaught ReferenceError: dojo is not defined, widget/Chart2D.js:1 
[20110818-09:33:13.138227] error: Uncaught ReferenceError: dojo is not defined, blue.js:1 
[20110818-09:33:13.150707] error: Uncaught TypeError: Cannot read property 'graphs2' of undefined, index.html:10 

当我使用它作为一个.HTML文件,它工作正常浏览器中的代码相同。

Chart.html:

<html> 
<head> 

<title>dojo</title> 

<script type="text/javascript" src="C:\Users\pangulur\Downloads\dojo-release-1.6.1- src\dojo-release-1.6.1-src\dojo\dojo.js"></script> 


</head> 
<body> 

<div id="chart1" style="width:260px;height:200px;"></div> 
<script> 
dojo.require('dojox.charting.Chart2D'); 
dojo.require('dojox.charting.widget.Chart2D'); 
dojo.require('dojox.charting.themes.PlotKit.green'); 

/* JSON information */ 
var json = { 
    January: [12999,14487,19803,15965,17290], 
    February: [14487,12999,15965,17290,19803], 
    March: [15965,17290,19803,12999,14487] 
}; 

/* build pie chart data */ 
var chartData = []; 
dojo.forEach(json['January'],function(item,i) { 
    chartData.push({ x: i, y: json['January'][i] }); 
}); 

/* resources are ready... */ 
dojo.ready(function() { 

    //create/swap data 
    var barData = []; 
    dojo.forEach(chartData,function(item) { barData.push({ x: item['y'], y: item['x'] }); }); 
    var chart1 = new dojox.charting.Chart2D('chart1'). 
        setTheme(dojox.charting.themes.PlotKit.green). 
        addAxis('x', { fixUpper: 'major', includeZero: false, min:0, max:6 }). 
        addAxis('y', { vertical: true, fixLower: 'major', fixUpper: 'major' }). 
        addPlot('default', {type: 'Columns', gap:5 }). 
        addSeries('Visits For February', chartData, {}); 
    var anim4b = new dojox.charting.action2d.Tooltip(chart1, 'default'); 
    var anim4c = new dojox.charting.action2d.Shake(chart1,'default'); 
    chart1.render(); 
    var legend4 = new dojox.charting.widget.Legend({ chart: chart1 }, 'legend3'); 

}); 
</script> 


</body> 
</html> 

请帮我在Enyo这一工作。 感谢你。

亲切的问候, 哈利。

回答

0

我不认为你必须修改Dojo代码。在Enyo中,你必须告诉框架在哪里寻找包含的JS文件。哟,编辑depends.js文件。

中的index.html:

<!doctype html> 
<html> 
<head> 
<title>Canvas Demo</title> 
<script src="../../../../1.0/framework/enyo.js" type="text/javascript"></script> 
</head> 
<body> 
<script type="text/javascript"> 
    new enyo.Canon.graphs2().renderInto(document.body); 
</script> 
</body> 
</html> 

和depends.js:

enyo.depends(
    "lib/dojo/dojo.js" , 

    "source/charts1.js" 
    ); 

你必须复制一切道场需要工作(道场,DojoX中,dijit的)到lib和检查enyo路径。

创建新的Chart2D对象时出现Dojo错误,我不是Dojo专家来解决此问题。这是该行:

var chart1 = new dojox.charting.Chart2D("simplechart"); 

我修改你的代码:

enyo.kind({ 
name: "enyo.Canon.graphs2", 
kind: enyo.Control, 
components: [ 
{kind: "PageHeader", content: "bargraph"}, 
//{style: "padding: 10px", content: "Note: In the browser, you can press ctrl-~ to display the app menu."}, 
{kind: "Button", caption: "display graph", onclick: "displayGraph", flex: 1}, 
], 
    displayGraph: function() { 

dojo.require('dojox.charting.Chart2D'); 
dojo.require('dojox.charting.widget.Chart2D'); 
dojo.require('dojox.charting.themes.PlotKit.green'); 

/* JSON information */ 
var json = { 
    January: [12999,14487,19803,15965,17290], 
    February: [14487,12999,15965,17290,19803], 
    March: [15965,17290,19803,12999,14487] 
}; 

/* build pie chart data */ 
var chartData = []; 
dojo.forEach(json['January'],function(item,i) { 
    chartData.push({ x: i, y: json['January'][i] }); 
}); 

/* resources are ready... */ 
dojo.ready(function() { 

    //create/swap data 
    var barData = []; 
    dojo.forEach(chartData,function(item) { barData.push({ x: item['y'], y: item['x'] }); }); 
    var chart1 = new dojox.charting.Chart2D("simplechart"); // HERE IS THE PROBLEM 
    chart1.setTheme(dojox.charting.themes.PlotKit.green); 
        chart1.addAxis('x', { fixUpper: 'major', includeZero: false, min:0, max:6 }); 
        chart1.addAxis('y', { vertical: true, fixLower: 'major', fixUpper: 'major' }); 
        chart1.addPlot('default', {type: 'Columns', gap:5 }); 
        chart1.addSeries('Visits For February', chartData, {}); 
    var anim4b = new dojox.charting.action2d.Tooltip(chart1, 'default'); 
    var anim4c = new dojox.charting.action2d.Shake(chart1,'default'); 
    chart1.render(); 
    // var legend4 = new dojox.charting.widget.Legend({ chart: chart1 }, 'legend3'); 

}); 

} });

该对象没有被实例化。有空指针:-(

+0

嗨, 感谢您的回应。我以前没有这样做,现在我尝试了这个,但仍然没有得到dojo执行,我在下面重新发布我的代码请看看。 谢谢。 – harry