Javascript 我想使用Node.js中为Google图表呈现的值

我想使用Node.js中为Google图表呈现的值

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

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

HTML（index.pug）

我在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？

为了在页面中定义服务器端javascript变量，必须插入将该javascript变量定义呈现到页面中的PUG语法。对于

测试

变量，您可以向模板中添加如下内容：

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>

var测试=[[0,0]、[1,10]、[2,23]、[3,17]、[4,18]；

您的变量将在页面中定义

您也不必单独定义变量，只需将

#{tests}

放在Javascript的中间，您希望使用该值，并将数组插入到需要的地方。这两种方式都会奏效

---

---

另外，您永远不应该使用

for/in

迭代数组，因为这会迭代对象的所有属性，而不仅仅是数组条目（有时有效，但不一定总是有效）（可能包括对象的其他属性）。在ES5中，使用传统的

for（var i=0；i

循环或使用

.forEach（）

。在ES6中，使用

for/of

您将需要查看类似

express

框架的内容来发送结果。。然后，您可以使用来自客户端的Ajax调用来获取数据。您可以在index.pug中的脚本标记中编写JS，这样您就可以访问tests对象。如果你不想做一个AJAX请求，非常感谢你。这个方法成功了！

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