本文介绍了如果静态值有效但是mySQL的动态不是，我如何用Javascript在Chart.js中显示JSON数据？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我有以下形式的JSON数据：
{
labels：[12.11.2016 ，13.11.2016，2016年11月14日，......]，
温度：[12，35，27，......]，
湿度：[56，70，87，...]
}
并希望在Chart.js中显示它。
我已经找到了
但动态数据加载（如上面的代码中所示）不起作用：/有没有人有想法？
我得到的错误是：
解决方案
我现在设法自行解决这个问题，代码如下：
<！doctype html>
< html>
< head>
< meta http-equiv =Content-Typecontent =text / html; charset = UTF-8/>
< meta http-equiv =X-UA-Compatiblecontent =IE = edge，chrome = 1>< meta http-equiv =Content-Typecontent =text / html;字符集= 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（）{
返回Math.round（Math.random（）* 100）;
};
var randomColorFactor = function（）{
返回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，
数据：温度，
填充：false
}，
{
标签：Feuchtigkeit，
数据：湿度，
fill：false
}]
}，
选项：{
responsive：true，
title：{
display：true，
text：'Temperatur und Feuchtigkeit'
}，
工具提示：{
模式：'label'
}，
悬停：{
模式： 数据集'
}，
比例：{
xAxes：[{
display：true，
scaleLabel：{
display：true，
labelString：'Datum'
}
}]，
yAxes：[{
display：true，
scaleLabel：{
display：true，
labelString：'Wert'
}，
ticks：{
suggestMin：-20，
suggestMax：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>
结果如下：
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:
解决方案
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:
这篇关于如果静态值有效但是mySQL的动态不是，我如何用Javascript在Chart.js中显示JSON数据？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！