Javascript 在node.js中使用chart.js_Javascript_Node.js_Chart.js

Javascript 在node.js中使用chart.js

javascript node.js chart.js

Javascript 在node.js中使用chart.js,javascript,node.js,chart.js,Javascript,Node.js,Chart.js,我正在创建一个站点，从中获取实时数据，并希望它使用chart.js将这些数据输出到图表中。我已经得到了阵列中的时间、日期（所有字段）质子密度、体速度和离子温度，但我不知道如何在这个设置中使用chart.js。到目前为止，我所成功做到的就是 npm install chart.js 这是在设置方面吗我知道我需要用Javascript设置图表和数据，并用HTML绘制画布。但是我不知道把js/css放在哪里。我试着把它放在代码的response.write（）部分的脚本标记中，但即使在双引号中使用

我正在创建一个站点，从中获取实时数据，并希望它使用chart.js将这些数据输出到图表中。我已经得到了阵列中的时间、日期（所有字段）质子密度、体速度和离子温度，但我不知道如何在这个设置中使用chart.js。到目前为止，我所成功做到的就是

npm install chart.js

这是在设置方面吗

我知道我需要用Javascript设置图表和数据，并用HTML绘制画布。但是我不知道把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);

//console.log（年、月、日、时间、状态号、质子、bulksp、离子温度）；
createServer（函数（请求、响应）{
//工作正常，但我无法将值传递给它
fs.readFile（'index.html'，函数（err，data）{
writeHead（200，{'Content-Type'：'text/html'}）；
响应。写入（数据）；
//我不喜欢添加更复杂的代码（如javascript等）
//write（'\n\nSLAR活动\n\n'+iontemp+'\n'）；
response.end（）；
});
}).听（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>

我们只需将占位符替换为实际数据。

谢谢！但是，当我尝试加载页面时，控制台中会显示“没有方法‘替换’”——有什么想法吗。当我运行服务器时，将

var result

行替换为

var result=data.toString（'utf8'）。替换（{{chartData}}'，JSON.stringify（chartData））谢谢：）但我必须这样做才能喜欢4-5个不同的数组。如何将其用于多个数组？您可以构造整个数据对象。所以你会有类似于var data={{data}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/');