时间戳

首页 > 解决方案 > 将数据从 Express 传递到 HTML (Pug) 以显示 Chart.js

node.js - 将数据从 Express 传递到 HTML (Pug) 以显示 Chart.js

问题描述

我是 Web 开发的新手，所以对我来说一切都是新的，尤其是异步代码与我之前学习的 C 语言完全不同。

我一直在尝试将值从 Express 传递到 HTML 以显示图表，但不幸的是，经过 2 天的尝试，我仍然无法正确执行它。

让我们直接看代码：-

index.js

app.get('/', function (req, res) {
   res.render('index', { var1: 'apple' });
})

指数.pug

    //Codes simplified
    const chartData = {
    labels: labels,
    datasets: [{
        //label: 'My First dataset',   <--Default value which works
        label: var1,    <----I have tried {{var1}}, <<%= var1 >> none works

        data: [0, 10, 5, 2, 20, 30, 45],
    }]
    };

我可以轻松地将值从 Express 传递到 HTML(Pug)。但是任何东西都属于 Chart 的脚本，它就是行不通的。一旦我切换到默认值，它就可以工作，因此脚本实际上没问题，但我的值传递方法..经过数小时的谷歌搜索后，我仍然不知道是什么问题。

如果您需要更多信息，我也可以提供。谢谢！

找到了答案
它应该是'!{var1}' for Pug！

标签： node.jsexpresschart.js

解决方案

{{var1}}, <<%= var1 >> 分别是 Handlebars 和 EJS 的语法。

对于帕格，它将是#{var1}。

下面的示例代码片段

阅读 HTML/模板文件并将标识符替换为图表数据。

下面的哈巴狗文件。

doctype html
html
  head
    title my chart application
    meta(charset='utf-8')
    | **
    script(src='https://cdn.jsdelivr.net/npm/chart.js')
    | **
    style.
      
  body
    canvas#test
    script.
      var data = {
         labels: ["Mon", "Tue", "Wed", "Thu", "Fri"],
         datasets: [
              {
                label: "My data",
                fillColor: "rgba(189,156,221,0.2)",
                strokeColor: "rgba(189,156,221,1)",
                pointColor: "rgba(189,156,221,1)",
                pointStrokeColor: "#111",
                pointHighlightFill: "#000",
                pointHighlightStroke: "rgba(189,156,221,1)",
                data: #{myChartInfo}
              }
            ]
         };
      
      var ctx = document.getElementById("test").getContext("2d");
      var myChart = new Chart(ctx).Line(data);

节点

var http = require('http');
var fs = require('fs');

http.createServer(function (req, res) {
    fs.readFile('index.pug', 'utf-8', function (err, data) {
        res.writeHead(200, { 'Content-Type': 'text/html' });
        const chartData = 'some data';
        const result = data.toString('utf8').replace('#{myChartInfo}', JSON.stringify(chartData));
        res.write(result);
        res.end();
    });
}).listen(3000);

HTML/模板引擎中的#{myChartInfo}被替换为服务器端的数据。

推荐阅读