我有以下格式的JSON数据：
{
"labels": ["12.11.2016", "13.11.2016", "14.11.2016", ...],
"temperature": ["12", "35", "27", ...],
"humidity": ["56", "70", "87", ...]
}
想在Chart.js中显示。
我已经找到了this的例子，但不知怎的它不起作用。。。
我的Chart.js代码如下：
<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script src="/node_modules/chart.js/dist/Chart.bundle.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<style>
canvas{
-moz-user-select: none;
-webkit-user-select: none;
-ms-user-select: none;
}
</style>
<title>Temperatur und Feuchtigkeit</title>
</head>
<body>
<div style="width: 100%;">
<canvas id="canvas"></canvas>
</div>
<script>
var data;
$.get('GetTestData.php', function(dataGet) {
data = JSON.parse(dataGet);
//console.log(data['labels']);
});
var randomScalingFactor = function() {
return Math.round(Math.random() * 100);
};
var randomColorFactor = function() {
return Math.round(Math.random() * 255);
};
var randomColor = function(opacity) {
return 'rgba(' + randomColorFactor() + ',' + randomColorFactor() + ',' + randomColorFactor() + ',' + (opacity || '.9') + ')';
};
var config = {
type: 'line',
data: {
//labels: ["11.11.2016", "12.11.2016", "13.11.2016", "14.11.2016", "15.11.2016", "16.11.2016", "17.11.2016"],
labels: labels
datasets: [{
label: "Temperatur",
//data: [randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor()],
data: temperature
fill: false
}//,
//{
// label: "Feuchtigkeit",
// data: [randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor()],
// fill: false
//}]
},
options: {
responsive: true,
title:{
display:true,
text:'Temperatur und Feuchtigkeit'
},
tooltips: {
mode: 'label'
},
hover: {
mode: 'dataset'
},
scales: {
xAxes: [{
display: true,
scaleLabel: {
display: true,
labelString: 'Datum'
}
}],
yAxes: [{
display: true,
scaleLabel: {
display: true,
labelString: 'Wert'
},
ticks: {
suggestedMin: -20,
suggestedMax: 250,
}
}],
}
}
};
var labels = [], temperature=[], humidity=[];
data['labels'].forEach(function(singleResult) {
labels.push(singleResult);
});
data['temperature'].forEach(function(singleResult) {
temperature.push(singleResult);
});
data['humidity'].forEach(function(singleResult) {
humidity.push(singleResult);
});
$.each(config.data.datasets, function(i, dataset) {
dataset.borderColor = randomColor(1.0);
dataset.backgroundColor = randomColor(1.0);
dataset.pointBorderColor = randomColor(1.0);
dataset.pointBackgroundColor = randomColor(1.0);
dataset.pointBorderWidth = 1;
});
window.onload = function() {
var ctx = document.getElementById("canvas").getContext("2d");
window.myLine = new Chart(ctx, config);
};
</script>
</body>
</html>
对于静态值，我得到了一个非常好的图形，如：
但是动态数据加载（如上面的代码中所示）不起作用：这里有人知道吗？
我得到的错误是：
SyntaxError:属性列表[Weitere Informationen]后缺少}
最佳答案
我现在自己解决了这个问题，代码如下：
<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script src="/node_modules/chart.js/dist/Chart.bundle.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<style>
canvas{
-moz-user-select: none;
-webkit-user-select: none;
-ms-user-select: none;
}
</style>
<title>Temperatur und Feuchtigkeit</title>
</head>
<body>
<div style="width: 100%;">
<canvas id="canvas"></canvas>
</div>
<script>
var data = [], labels = [], temperature=[], humidity=[];
$.get('GetTestData.php', function(dataGet) {
data = JSON.parse(dataGet);
data['labels'].forEach(function(singleResult) {
labels.push(singleResult);
});
data['temperature'].forEach(function(singleResult) {
temperature.push(singleResult);
});
data['humidity'].forEach(function(singleResult) {
humidity.push(singleResult);
});
var ctx = document.getElementById("canvas").getContext("2d");
window.myLine = new Chart(ctx, config);
});
var randomScalingFactor = function() {
return Math.round(Math.random() * 100);
};
var randomColorFactor = function() {
return Math.round(Math.random() * 255);
};
var randomColor = function(opacity) {
return 'rgba(' + randomColorFactor() + ',' + randomColorFactor() + ',' + randomColorFactor() + ',' + (opacity || '.9') + ')';
};
var config = {
type: 'line',
data: {
labels: labels,
datasets: [{
label: "Temperatur",
data: temperature,
fill: false
},
{
label: "Feuchtigkeit",
data: humidity,
fill: false
}]
},
options: {
responsive: true,
title:{
display:true,
text:'Temperatur und Feuchtigkeit'
},
tooltips: {
mode: 'label'
},
hover: {
mode: 'dataset'
},
scales: {
xAxes: [{
display: true,
scaleLabel: {
display: true,
labelString: 'Datum'
}
}],
yAxes: [{
display: true,
scaleLabel: {
display: true,
labelString: 'Wert'
},
ticks: {
suggestedMin: -20,
suggestedMax: 250,
}
}],
}
}
};
$.each(config.data.datasets, function(i, dataset) {
dataset.borderColor = randomColor(1.0);
dataset.backgroundColor = randomColor(1.0);
dataset.pointBorderColor = randomColor(1.0);
dataset.pointBackgroundColor = randomColor(1.0);
dataset.pointBorderWidth = 1;
});
window.onload = function() {
var ctx = document.getElementById("canvas").getContext("2d");
window.myLine = new Chart(ctx, config);
};
</script>
</body>
</html>
结果如下：
关于javascript - 如果静态值有效但mySQL的动态值无效，如何使用Javascript在Chart.js中显示JSON数据？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/39822139/