如果静态值有效但 mySQL 中的动态值无效，如何使用 Javascript 在 Chart.js 中显示 JSON 数据?
我有以下格式的 JSON 数据:
<代码>{标签":[12.11.2016"，13.11.2016"，14.11.2016"，...]，"温度": ["12", "35", "27", ...],湿度":[56"，70"，87"，...]}并希望在 Chart.js 中显示它.
我已经找到 但是动态数据加载(如上面的代码)不起作用:/这里有人知道吗?
我得到的错误是:
<块引用>SyntaxError: missing } after property list[Weitere Informationen]
解决方案我现在自己解决了这个问题，代码如下:
<!doctype html><html><头><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><风格>帆布{-moz 用户选择:无；-webkit 用户选择:无；-ms 用户选择:无；}</风格><title>Temperatur und Feuchtigkeit</title></头><身体><div style="宽度: 100%;"><canvas id="canvas"></canvas></div><脚本>var 数据 = []，标签 = []，温度 = []，湿度 = []；$.get('GetTestData.php', function(dataGet) {数据 = JSON.parse(dataGet);data['labels'].forEach(function(singleResult) {标签.push(singleResult);});数据['温度'].forEach(函数(singleResult){温度.push(singleResult);});数据['湿度'].forEach(function(singleResult) {湿度.push(singleResult);});var ctx = document.getElementById("canvas").getContext("2d");window.myLine = new Chart(ctx, config);});var randomScalingFactor = function() {返回 Math.round(Math.random() * 100);};var randomColorFactor = function() {返回 Math.round(Math.random() * 255);};var randomColor = 函数(不透明度){return 'rgba(' + randomColorFactor() + ',' + randomColorFactor() + ',' + randomColorFactor() + ',' + (opacity || '.9') + ')';};变量配置 = {类型:'线'，数据: {标签:标签，数据集:[{标签:温度"，数据:温度，填写:假},{标签:Feuchtigkeit"，数据:湿度，填写:假}]},选项: {响应式:真实，标题:{显示:真，文本:'温度和 Feuchtigkeit'},工具提示:{模式:'标签'},悬停:{模式:数据集"},秤:{x轴:[{显示:真，刻度标签:{显示:真，labelString: '基准'}}],y轴:[{显示:真，刻度标签:{显示:真，标签字符串:'Wert'},滴答声:{建议最小值:-20，建议最大: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);数据集.pointBorderWidth = 1;});window.onload = 函数(){var ctx = document.getElementById("canvas").getContext("2d");window.myLine = new Chart(ctx, config);};</脚本></身体></html>结果如下:
I have JSON data in the following form:
{
"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.
I already found this example but it somehow isn't working...
My code for Chart.js is the following:
<!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]
解决方案
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>
Result looks as following:
相关文章