javascript - 我想将 Node.js 中呈现的值用于 Google Chart

Question

我想将 Node.js 中呈现的值用于 Google Chart。

但是，我无法成功地将服务器端呈现的变量传递给客户端的 javascript。

我正在使用 Node.js、Express 和 Pug。 这是代码。

HTML(index.pug)

script(type='text/javascript', src='https://www.gstatic.com/charts/loader.js')

#chart_div

我在javascript中使用了“tests”变量如下，但是并不顺利

JavaScript

google.charts.load('current', {packages: ['corechart', 'line']});
google.charts.setOnLoadCallback(drawChart);

function drawChart() {

      var data = new google.visualization.DataTable();
      data.addColumn('number', 'X');
      data.addColumn('number', 'Dogs');

      for(var test of tests)
      {
         data.addRows([test]);
      }

      var options = {
        hAxis: {
          title: 'Time'
        },
        vAxis: {
          title: 'Popularity'
        }
      };

      var chart = new google.visualization.LineChart(document.getElementById('chart_div'));

      chart.draw(data, options);
    }

Node .js

var tests = [[0, 0],[1, 10],[2, 23],[3, 17],[4, 18]];
res.render('index', {
    tests: tests
});

如何在客户端将“测试”变量传递给 javascript？

Answer 1

为了在您的页面中定义服务器端 Javascript 变量，您必须插入 PUG 语法以将 Javascript 变量定义呈现到您的页面中。为您tests变量，您可以在模板中添加类似这样的内容:

script.
    var tests = #{tests};

然后，将您传递到模板中的内容更改为:

res.render('index', {
    tests: JSON.stringify(tests)
});

然后，当页面呈现时，它将显示为:

<script>
    var tests = [[0, 0],[1, 10],[2, 23],[3, 17],[4, 18]];
</script>

您的变量将在您的页面中定义。

您也不必单独定义变量，只需输入 #{tests}就在您想要使用该值的 Javascript 中间，并将数组插入到需要的地方。它会以任何一种方式工作。

---

附言你不应该用 for/in 迭代一个数组因为它会迭代对象的所有属性，而不仅仅是有时会起作用但不一定总是起作用的数组条目(可能包括对象的其他属性)。在 ES5 中，使用传统的 for(var i = 0; i < array.length; i++)循环或使用 .forEach() .在 ES6 中，使用 for/of .