如何使用 JS 向图表发送数据？答案

【问题标题】：How to send data to the chart using JS?如何使用 JS 向图表发送数据？
【发布时间】：2021-05-20 09:16:34
【问题描述】：

我使用 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>

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.");
})

【问题讨论】：

标签： javascript html node.js arrays react-google-charts

【解决方案1】：

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

说你在node 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'
    };

...

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

【讨论】：

有问题。当我尝试在我的 js “drawChart(chartData);”中调用该函数时它说“ReferenceError：drawChart 未定义”。这是因为这个函数在 html 文件中。我不知道如何从 js 访问 html 中的这个函数
你的 html 中是否包含了你的外部 JS 文件？
是的，在我的正文 html 中有这一行
如果不能直接调用drawchart函数，能不能把app.js中的数组返回html，然后传给drawchart呢？这肯定有效。
如果你能告诉我怎么做，我会很高兴的。

【解决方案2】：

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

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>

希望对你有帮助

【讨论】：

谢谢，但问题是我需要在图表中显示这些数据。我有数据和图表。如何将这些数据从 js 文件发送到 HTML 文件中的图表？
你只需要把它放在HTML文件内联脚本上。代码更新了。请确保您根据您的谷歌图表样式修改了 chardData。