Question

我正在使用Node.js并尝试显示一个图表，该图表是从txt文件的坐标生成的，该图表被上传到服务器。我的问题：当我打开网页并上传文件时，一切都运行正常，但图表无效：我收到以下错误： UncaughtSyntaxError：意外的令牌变种

如果我在没有node.js的情况下渲染网页，一切正常。

代码：

var express = require("express"); 
var app = express();
var fs = require('fs');  // we will need it for file uploads
var port = process.env.PORT || 3000;

app.configure(function(){
  app.use(express.bodyParser());
  app.use(express.methodOverride());
  app.use(app.router);
  app.use(express.static(__dirname + '/public'));
});

app.get('/', function(req, res) {

     res.send('<form method="post" enctype="multipart/form-data">'
    + '<p>Image: <input type="file" name="uploadfile" /></p>'
    + '<p><input type="submit" value="Upload" /></p>'
    + '</form>');

});

app.post('/', function(req, res){

    // .. Upload and file reading 
    // .. var obj[key1] (X-Values) and var obj[key2] (Y-Values) are generated 
    // .. 
                    res.send('<head><title>Line Chart</title><script src="../Chart.js"></script><meta name = "viewport" content = "initial-scale = 1, user-scalable = no"><style>canvas{    }</style></head><body><canvas id="canvas" height="450" width="600"></canvas>'
                    +'<script type="text/javascript">'  
                    +' ' 
                    +'var lineChartData = { ' 
                    +'labels : [ ' + obj[key1] + ' ],' 
                    +'datasets : [{' 
                    +'fillColor : "rgba(151,187,205,0.5)",' 
                    +'strokeColor : "rgba(0, 0, 0, 0.831373)",' 
                    +'pointColor : "rgba(151,187,205,1)",' 
                    +'pointStrokeColor : "gba(76, 255, 178, 0.831373)",' 
                    +'data : ['+ obj[key2] + ' ]' 
                    +'} ] } '  
                    +'var myLine = new Chart(document.getElementById("canvas").getContext("2d")).Line(lineChartData);' 
                    +'</script>'
                    +'</body></html>'
                    );
            };
        });

     });        
});

app.listen(port, function() {
  console.log("Listening on " + port);
});

我希望你能帮帮我..

问候，

JS

Answer 1

由于您不在代码示例中使用换行符，因此这将是输出：

var lineChartData = { labels : [ undefined ],datasets : [{fillColor : "rgba(151,187,205,0.5)",strokeColor : "rgba(0, 0, 0, 0.831373)",pointColor : "rgba(151,187,205,1)",pointStrokeColor : "gba(76, 255, 178, 0.831373)",data : [undefined ]} ] } var myLine = new Chart(document.getElementById("canvas").getContext("2d")).Line(lineChartData);

这是无效的Javascript，因为您需要使用;

关闭'lineChardData'对象

将其改为此状态，它将起作用：

res.send('<head><title>Line Chart</title><script src="../Chart.js"></script><meta name = "viewport" content = "initial-scale = 1, user-scalable = no"><style>canvas{    }</style></head><body><canvas id="canvas" height="450" width="600"></canvas>'
                    +'<script type="text/javascript">'  
                    +' ' 
                    +'var lineChartData = { ' 
                    +'labels : [ ' + obj[key1] + ' ],' 
                    +'datasets : [{' 
                    +'fillColor : "rgba(151,187,205,0.5)",' 
                    +'strokeColor : "rgba(0, 0, 0, 0.831373)",' 
                    +'pointColor : "rgba(151,187,205,1)",' 
                    +'pointStrokeColor : "gba(76, 255, 178, 0.831373)",' 
                    +'data : ['+ obj[key2] + ' ]' 
                    +'} ] }; '  
                    +'var myLine = new Chart(document.getElementById("canvas").getContext("2d")).Line(lineChartData);' 
                    +'</script>'
                    +'</body></html>'
                    );

此外，我不认为直接从Node.js输出HTML / javascript数据是好的或好的做法..

Answer 2

您没有发送任何换行符（因此缩小）JavaScript解释器会看到以下无效代码：

var lineChartData = { /*...*/} var myLine = new Chart(/*...*/);

在第一个var语句后添加分号，它将起作用：

var lineChartData = { /*...*/}; var myLine = new Chart(/*...*/);
//                            ^ Put me here

如果输出中有一个换行符，它将在没有分号的情况下工作，因为ASI会介入，这是另一种可能的解决方案。

未捕获的SyntaxError：意外的令牌var Node.js

2 个答案: