[英]How can I show JSON data in Chart.js with Javascript if static values are working but dynamic from mySQL are not?
I have JSON data in the following form: 我有以下形式的JSON数据:
{
"labels": ["12.11.2016", "13.11.2016", "14.11.2016", ...],
"temperature": ["12", "35", "27", ...],
"humidity": ["56", "70", "87", ...]
}
and want to show it in Chart.js. 并希望在Chart.js中显示它。
I already found this example but it somehow isn't working... 我已经找到了这个例子,但是它不起作用...
My code for Chart.js is the following: 我的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>
With static values I get an very nice graph like this: 使用静态值,我得到一个非常漂亮的图形,如下所示:
But the dynamic data load (like in the above code) is not working :/ Does anyone have an idea here?
但是动态数据加载(如上面的代码中)不起作用:/有人在这里有想法吗?
The error I'm getting is: 我得到的错误是:
SyntaxError: missing } after property list[Weitere Informationen]
语法错误:属性列表后缺少} [Weitere Informationen]
I now managed to resolve this on my own, code is below: 我现在设法自己解决此问题,代码如下:
<!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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.