Question

首先，对于该主题的另一个问题，我深表歉意，但是在阅读了数十个示例和解决方案后，我无法解决我的问题并使它正常工作。

我编写了一个脚本，该脚本与API进行通信，并且每隔5分钟就会吐出一个包含数据的数组。我将其保存在计算机上的本地存储中。我想将这些数据放入图表中。现在，我已经使用了很多示例，但是只能得到一个静态图表。

我有一个server.js文件和一个index.html文件。两者都是我从其他帖子中摘录的示例，我正在尝试根据需要对其进行修改。

我试图：

=>包括一个.js文件

错误：“不允许加载本地资源”

=>在外部文件中使用document.getElementById。同样的错误

Server.js

var express = require('express');
var app = express();

var bodyParser = require("body-parser");
app.use(bodyParser.urlencoded({ extended: false }));
app.use(bodyParser.json());


app.get('/', function (req, res) {
    res.sendFile(__dirname + '/index.html')
});

app.post('/submit-data', function (req, res) {
    res.send('POST Request');
});

app.put('/update-data', function (req, res) {
    res.send('PUT Request');
});

app.delete('/delete-data', function (req, res) {
    res.send('DELETE Request');
});

var server = app.listen(3000, function () {
    console.log('Node server is running..');
});

Index.html

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <title>API Chart!</title>
    <script src="https://cdn.jsdelivr.net/npm/chart.js@2.8.0"></script>

  </head>
  <body>

    <canvas id="myChart" width="400" height="400"></canvas>
<script>
    var ctx = document.getElementById('myChart').getContext('2d');
    var chart = new Chart(ctx, {
        // The type of chart we want to create
        type: 'bar',

        // The data for our dataset
        data: {
            labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
            datasets: [{
                label: 'My First dataset',
                backgroundColor: 'rgb(255, 99, 132)',
                borderColor: 'rgb(255, 99, 132)',
                data: [0, 10, 5, 2, 20, 30, 45] // this data needs to change
            }]
        },

        // Configuration options go here
        options: {}
    });

</script>

  </body>
</html>

我需要的是数据集中要动态的数据。我想每5分钟将新数据推送到图表中。如何将变量放入包含API数据的HTML文件中？

Chart JS-使用API数据的动态图表

0 个答案:

Chart JS-使用API​​数据的动态图表

0 个答案:

Chart JS-使用API数据的动态图表