我想使用Node.js中爲Google圖表呈現的值

我想使用Google圖表的Node.js中呈現的值。我想使用Node.js中爲Google圖表呈現的值

但是，我無法成功地將服務器端呈現的變量傳遞給客戶端的JavaScript。

我正在使用Node.js，Express和帕格。這是代碼。

HTML（index.pug）

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

#chart_div

我用了「測試」在JavaScript變量，如下所示，但並不順利

的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？

來源

2017-08-30 pekochun

你會想看看'express'框架來發送結果。然後你可以使用來自客戶端的Ajax調用來獲取數據。 – Keith

您可以在index.pug中的腳本標記中寫入JS，這樣您將有權訪問測試對象。如果您不想提出AJAX請求 –

爲了在頁面中定義一個服務器端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的中間位置，並將該數組插入到需要的位置即可。它將以任何方式工作。

P.S.你永遠不應該使用for/in迭代一個數組，因爲它迭代了對象的所有屬性，而不僅僅是有時會工作的數組條目，但不一定總是（可能包含對象的其他屬性）。在ES5中，使用傳統的for(var i = 0; i < array.length; i++)循環或使用.forEach()。在ES6中，使用for/of。

來源

2017-08-30 21:29:08 jfriend00

非常感謝。用這種方法成功！ – pekochun

我想使用Node.js中爲Google圖表呈現的值

回答

相關問題