Question

我是Enyo（TouchPad）的新开发人员。我想开发一个包含一些图表的应用程序。所以我试图在Enyo中使用Dojo框架库。

任何人都可以帮助我如何在我的应用程序中包含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 file ::

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 CODE ::

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中运行..

先谢谢。

此致哈利。

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>

Source / 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中调用dojo代码。

和

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工作。感谢你。

亲切的问候，哈利。

Answer 1

我认为您不必修改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"
     );

你必须将Dojo需要工作的所有内容（dojo，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');

});

} }）;

该对象未实例化。得到空指针： - （

如何在Enyo中使用Dojo代码..？

1 个答案: