如果静态值起作用，而mySQL的动态值不起作用，那么如何使用Javascript在Chart.js中显示JSON数据？
我有以下格式的JSON数据：如果静态值起作用，而mySQL的动态值不起作用，那么如何使用Javascript在Chart.js中显示JSON数据？,javascript,jquery,mysql,json,chart.js,Javascript,Jquery,Mysql,Json,Chart.js,我有以下格式的JSON数据： { "labels": ["12.11.2016", "13.11.2016", "14.11.2016", ...], "temperature": ["12", "35", "27", ...], "humidity": ["56", "70", "87", ...] } 并希望在Chart.js中显示它 我已经找到了一个例子，但不知何故它不起作用 我的Chart.js代码如下： <!doctype html> <ht
{
"labels": ["12.11.2016", "13.11.2016", "14.11.2016", ...],
"temperature": ["12", "35", "27", ...],
"humidity": ["56", "70", "87", ...]
}
<!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>
帆布{
-moz用户选择：无；
-webkit用户选择：无；
-ms用户选择：无；
}
温度和温度
var数据；
$.get（'GetTestData.php'，函数（dataGet）{
data=JSON.parse（dataGet）；
//日志（数据['labels']）；
});
var randomScalingFactor=函数（）{
返回Math.round（Math.random（）*100）；
};
var randomColorFactor=函数（）{
返回Math.round（Math.random（）*255）；
};
var randomColor=函数（不透明度）{
返回'rgba（'+randomColorFactor（）+'、'+randomColorFactor（）+'、'+randomColorFactor（）+'、'+（不透明度| |'.9'）+'））'；
};
变量配置={
键入：“行”，
数据：{
//标签：[“2016年11月11日”、“2016年11月12日”、“2016年11月13日”、“2016年11月14日”、“2016年11月15日”、“2016年11月16日”、“2016年11月17日”]，
标签：标签
数据集：[{
标签：“温度”，
//数据：[randomScalingFactor（），randomScalingFactor（），randomScalingFactor（），randomScalingFactor（），randomScalingFactor（），randomScalingFactor（），randomScalingFactor（）]，
数据：温度
填充：假
}//,
//{
//标签：“Feuchtigkeit”，
//数据：[randomScalingFactor（），randomScalingFactor（），randomScalingFactor（），randomScalingFactor（），randomScalingFactor（），randomScalingFactor（），randomScalingFactor（）]，
//填充：假
//}]
},
选项：{
回答：是的，
标题：{
显示：对，
正文：“温度和温度”
},
工具提示：{
模式：“标签”
},
悬停：{
模式：“数据集”
},
比例：{
xAxes：[{
显示：对，
scaleLabel：{
显示：对，
标签字符串：“数据”
}
}],
雅克斯：[{
显示：对，
scaleLabel：{
显示：对，
标签串：“Wert”
},
滴答声：{
建议民：-20，
建议最大值：250，
}
}],
}
}
};
变量标签=[]、温度=[]、湿度=[]；
数据['labels'].forEach（函数（singleResult）{
标签。推送（singleResult）；
});
数据['temperature'].forEach（函数（singleResult）{
温度推送（单结果）；
});
数据['湿度].forEach（函数（singleResult）{
湿度。推（单次结果）；
});
$.each（config.data.dataset，函数（i，数据集）{
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=函数（）{
var ctx=document.getElementById（“画布”）.getContext（“2d”）；
window.myLine=新图表（ctx，配置）；
};
现在我自己设法解决了这个问题，代码如下：
帆布{
-moz用户选择：无；
-webkit用户选择：无；
-ms用户选择：无；
}
温度和温度
变量数据=[]、标签=[]、温度=[]、湿度=[]；
$.get（'GetTestData.php'，函数（dataGet）{
data=JSON.parse（dataGet）；
数据['labels'].forEach（函数（singleResult）{
标签。推送（singleResult）；
});
数据['temperature'].forEach（函数（singleResult）{
温度推送（单结果）；
});
数据['湿度].forEach（函数（singleResult）{
湿度。推（单次结果）；
});
var ctx=document.getElementById（“画布”）.getContext（“2d”）；
window.myLine=新图表（ctx，配置）；
});
var randomScalingFactor=函数（）{
返回Math.round（Math.random（）*100）；
};
var randomColorFactor=函数（）{
返回Math.round（Math.random（）*255）；
};
var randomColor=函数（不透明度）{
返回'rgba（'+randomColorFactor（）+'、'+randomColorFactor（）+'、'+randomColorFactor（）+'、'+（不透明度| |'.9'）+'））'；
};
变量配置={
键入：“行”，
数据：{
标签：标签，
数据集：[{
标签：“温度”，
数据：温度，
F