Javascript 图表JS-使用API数据的动态图表
首先，我会为这个话题的另一个问题道歉，但是在阅读了这里的几十个例子和解决方案之后，我无法解决我的问题并让它发挥作用 我编写了一个与API通信的脚本，每5分钟它就会输出一个包含数据的数组。我将其保存在计算机的本地存储中。我想把这些数据放在图表中。现在我已经使用了很多例子，但我只得到一个静态图表 我有一个server.js文件和一个index.html文件。这两篇文章都是我从其他文章中摘取的例子，我正试图根据自己的需要修改它们 我试图： =>包含一个.js文件 错误：“不允许加载本地资源” =>在外部文件中使用document.getElementById。 同样的错误 Server.jsJavascript 图表JS-使用API数据的动态图表,javascript,html,chart.js,Javascript,Html,Chart.js,首先，我会为这个话题的另一个问题道歉，但是在阅读了这里的几十个例子和解决方案之后，我无法解决我的问题并让它发挥作用 我编写了一个与API通信的脚本，每5分钟它就会输出一个包含数据的数组。我将其保存在计算机的本地存储中。我想把这些数据放在图表中。现在我已经使用了很多例子，但我只得到一个静态图表 我有一个server.js文件和一个index.html文件。这两篇文章都是我从其他文章中摘取的例子，我正试图根据自己的需要修改它们 我试图： =>包含一个.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..');
});
<!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>
API图表！
var ctx=document.getElementById（'myChart'）.getContext（'2d'）；
var图表=新图表（ctx{
//我们要创建的图表类型
类型：'bar'，
//我们的数据集的数据
数据：{
标签：[“一月”、“二月”、“三月”、“四月”、“五月”、“六月”、“七月”]，
数据集：[{
标签：“我的第一个数据集”，
背景颜色：“rgb（255，99，132）”，
边框颜色：“rgb（255，99，132）”，
数据：[0,10,5,2,20,30,45]//此数据需要更改
}]
},
//配置选项在这里
选项：{}
});