-1

我使用 Node.js 获得了一些数据。我有一个带有 Google Chart 的 HTML 文件。我想将我在 Node.js 中获得的信息发送到我的 HTML 中的 Google Chart，这样当我打开页面时，我可以看到带有我在 Node.js 中获得的信息的图表。

我不知道该怎么做。我需要在图表中显示这些数据。如何将此数据从 js 文件发送到 HTML 文件中的图表？

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
      google.charts.load('current', {'packages':['corechart']});
      google.charts.setOnLoadCallback(drawChart);

      function drawChart() {
    
        var tableData = google.visualization.arrayToDataTable([
          ['Task', 'Hours per Day'],
          ['Work',     10],
          ['Eat',      2],
          ['Commute',  2],
          ['Watch TV', 2],
          ['Sleep',    7]
            ]);

        var options = {
          title: 'My Daily Activities'
        };

        var chart = new google.visualization.PieChart(document.getElementById('piechart'));

        chart.draw(tableData, options);
      }

    </script>
</head>
<body>
    <div id="piechart" style="width: 900px; height: 500px;"></div>
    <script src="../app.js"></script>
</body>
</html>

在此处输入图像描述

JS

const express = require("express");
const request = require("request");
const https = require("https");
const app = express();


app.get("/", function(req, res){

    const url = "https://api.caw.sh/v3/covid-19/countries/ukraine?strict=true";
    
    https.get(url, function(response){
        console.log(response.statusCode);

        response.on("data", function(data){
            const covidData = JSON.parse(data); 
            console.log(covidData.cases);
        })
    })
    res.send("Success");
})


app.listen(3000, function(){
    console.log("Server is tunning on port 3000.");
})
4

2 回答 2

0

所以你可以做的就是将你的谷歌图表代码放在一个以数据为参数的函数中。现在从您的代码中调用此函数，并将该数据作为函数的输入。

假设您在节点 js 中的数据是一个数组

chartData = [['Task', 'Hours per Day'],
          ['Work',     10],
          ['Eat',      2],
          ['Commute',  2],
          ['Watch TV', 2],
          ['Sleep',    7]]

调用该函数来生成您的谷歌图表。

drawChart(chartData);

现在在你的函数中使用 chartData 数组生成谷歌图表，

function drawChart(chartData) {

    var tableData = google.visualization.arrayToDataTable(chartData);

    var options = {
      title: 'My Daily Activities'
    };

...

这样的事情应该会有所帮助。

于 2021-05-20T12:20:39.870 回答
0

在这种情况下，您不需要服务器。

JS 文件（在 jquery document.ready 函数中）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
      google.charts.load('current', {'packages':['corechart']});
      google.charts.setOnLoadCallback(chatStart);
    function chatStart(){
      jQuery.get("https://api.caw.sh/v3/covid-19/countries/ukraine?strict=true", 
         function(data,status){
   
         const arrayData = JSON.parse(data);
          console.log(arrayData);
          drawChart(arrayData)
       })
    }


      function drawChart(chartData) {
    
        var tableData = google.visualization.arrayToDataTable(chartData);

        var options = {
          title: 'My Daily Activities'
        };

        var chart = new google.visualization.PieChart(document.getElementById('piechart'));

        chart.draw(tableData, options);
      }

    </script>
</head>
<body>
    <div id="piechart" style="width: 900px; height: 500px;"></div>
    <script src="../app.js"></script>
</body>
</html>

希望这可以帮助你

于 2021-05-20T09:29:38.083 回答