在node.js中使用chart.js
我正在创build一个从http://services.swpc.noaa.gov/text/ace-swepam.txt获取实时数据的站点，我希望它使用chart.js将这些数据输出到图表。 我有时间，date（所有领域）质子密度，散装速度和离子温度的数组，但我不知道如何使用chart.js这个设置。 到目前为止我所做的一切都是成功的
npm install chart.js 那是不是在设立呢？
我知道我需要在Javascript中设置图表和数据，并在HTML中绘制canvas。 但是我不知道把js / css放在哪里。 我已经尝试把它放在代码的response.write（）部分的脚本标签中，但是即使使用双引号内的所有单引号，它仍然搞砸了，并告诉我是非法的。
我也尝试使用fs.readFile完成一个单独的html页面，并使用所有需要的Javascript和CSS，但是我不知道如何在html中使用我的节点数据。
// console.log(year, month, day, time, statusno, proton, bulksp, iontemp); http.createServer(function (request, response) { //works but I can't pass values into it fs.readFile('index.html',function (err, data){ response.writeHead(200, {'Content-Type': 'text/html'}); response.write(data); //Doesn't like it when I try adding more complicated code (like javascript etc) // response.write('<html>\n<head>\n<title>Solar Activity</title>\n</head>\n<body>'+iontemp+'</body>\n</html>'); response.end(); }); }).listen(8124);
注意：您应该使用某种模板引擎。
下面只是表明这是可能的
的index.html
<!DOCTYPE html> <html> <head> <title></title> <meta charset="utf-8" /> <script> // ** entire Chart.js library ** </script> <style> </style> </head> <body> <canvas id="myChart"></canvas> <script> var data = { labels: ["January", "February", "March", "April", "May", "June", "July"], datasets: [ { label: "My First dataset", fillColor: "rgba(220,220,220,0.2)", strokeColor: "rgba(220,220,220,1)", pointColor: "rgba(220,220,220,1)", pointStrokeColor: "#fff", pointHighlightFill: "#fff", pointHighlightStroke: "rgba(220,220,220,1)", data: {{chartData}} } ] }; var ctx = document.getElementById("myChart").getContext("2d"); var myNewChart = new Chart(ctx).Line(data); </script> </body> </html>
注意占位符{{chartData}} 。 另外请注意，您必须从Chart.js文件的实际脚本中replace（您可以链接到脚本文件，但是您需要一个提供静态文件的模块）
example.js
var http = require('http'); var fs = require('fs'); http.createServer(function (req, response) { fs.readFile('index.html', 'utf-8', function (err, data) { response.writeHead(200, { 'Content-Type': 'text/html' }); var chartData = []; for (var i = 0; i < 7; i++) chartData.push(Math.random() * 50); var result = data.replace('{{chartData}}', JSON.stringify(chartData)); response.write(result); response.end(); }); }).listen(1337, '127.0.0.1'); console.log('Server running at http://127.0.0.1:1337/');
我们简单地用占位符replace实际的数据。