我正在尝试以json格式可视化测量数据。查看我在https://www.andreas-weller.de/visu/index.html上的当前测试。但不幸的是，它根本不起作用：在控制台上没有错误，但图表为空。
这是我的代码：
<!doctype html>
<html>
<head>
<title>Line Chart</title>
</head>
<body>
<div style="width:75%;">
<canvas id="myChart"></canvas>
</div>
<script src="./jquery-3.4.1.min.js"></script>
<script src="./Chart.min.js"></script>
<script>
$.getJSON('https://www.andreas-weller.de/visu/data.json', function(data) {
var labels = data.chartData.data[0].map(function(e) {
return e[0];
});
var data = data.chartData.data[0].map(function(e) {
return e[1];
});
var ctx = document.getElementById('myChart').getContext('2d');
var chart = new Chart(ctx, {
type: 'line',
data: {
labels: labels,
datasets: [{
backgroundColor: 'rgb(129, 198, 2228)',
borderColor: 'rgb(0, 150, 215)',
data: data
}]
},
options: {
responsive: 'true',
}
});
});
</script></body></html>
根据您的API，您正在收到此对象：
{
...,
"data":[[1586736000000,0],[1586736900000,null]...]
...,
}
[当您这样做时：
var labels = data.chartData.data[0].map(...)
您正在定位第一组数据。就是[1586736000000,0]。
因此，要解决您的问题，您可以像这样：
var labels = data.chartData.data.map(function(e) {
return e[0];
});
var data = data.chartData.data.map(function(e) {
return e[1];
});
labels将返回：[1586736000000,1586736900000,...]
data将返回：[0,null,...]
也不要两次遍历同一数组，您可能更喜欢使用forEach。