Question

我正在创建一个从http://services.swpc.noaa.gov/text/ace-swepam.txt获取实时数据的网站，我希望它使用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);

Answer 1

注意：您应该使用某种模板引擎。

以下只是表明可能的事情

<强>的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文件中替换实际脚本（您可以链接到脚本文件，但是您需要一个提供静态文件的模块）

<强> 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/');

我们只是用实际数据替换占位符。

在node.js

1 个答案: