0
我試圖在條形圖中包含一些json值。我有JSON日誌記錄到控制檯,但不知道如何包含在圖表的數據屬性中。這裏是源JSON ...使用json文件作爲chart.js的數據源
{時間: 「2016-07-03T21:29:57.987Z」,溫度:25.2,壓力:98241,高度:259.98737254818553}
由於
<!doctype html>
<html>
<head>
<title>WeatherPush</title>
<script src="../dist/jquery.min.js"></script>
<script src="../dist/Chart.bundle.js"></script>
<style>
canvas {
-moz-user-select: none;
-webkit-user-select: none;
-ms-user-select: none;
}
</style>
</head>
<body>
<div id='d1' style="position:absolute; top:50px; left:0px; z-index:1">
<canvas id='canvas' width='250' height='500'>
Your browser does not support HTML5 Canvas.
</canvas>
</div>
<div id='d1' style="position:absolute; top:50px; left:300px; z-index:1">
<canvas id='canvas2' width='250' height='500'>
Your browser does not support HTML5 Canvas.
</canvas>
</div>
<div id='d1' style="position:absolute; top:50px; left:600px; z-index:1">
<canvas id='canvas3' width='250' height='500'>
Your browser does not support HTML5 Canvas.
</canvas>
</div>
<script>
var jsonObjGraph;
var getDataPromise = $.getJSON('../data.json', function(data) {
jsonObjGraph = data;
console.log(jsonObjGraph);
});
getDataPromise.done(function() {
// done
});
getDataPromise.fail(function() {
// fail;
});
var barChartData = {
labels : ["Temperature"],
datasets : [
{
label: 'Temperature',
data : []
}
]
}
var barChartData2 = {
labels : ["Pressure"],
datasets : [
{
label: 'Pressure',
data : []
}
]
}
var barChartData3 = {
labels : ["Altitude"],
datasets : [
{
label: 'Altitude',
data : []
}
]
}
window.onload = function(){
var ctx = document.getElementById("canvas").getContext("2d");
window.myBar = new Chart(ctx, {
type: 'bar',
data: barChartData,
options: {
elements: {
rectangle: {
backgroundColor: "rgba(151,187,205,0.5)",
borderWidth: 2,
borderColor: 'gray',
}
},
responsive: true,
legend: {
position: 'right',
display: false,
},
title: {
display: false,
text: 'Temperature'
}
}
});
var ctx2 = document.getElementById("canvas2").getContext("2d");
window.myBar = new Chart(ctx2, {
type: 'bar',
data: barChartData2,
options: {
elements: {
rectangle: {
backgroundColor: "rgba(151,187,205,0.5)",
borderWidth: 2,
borderColor: 'gray',
}
},
responsive: true,
legend: {
display: false,
position: 'right',
},
title: {
display: false,
text: 'Pressure'
}
}
});
var ctx3 = document.getElementById("canvas3").getContext("2d");
window.myBar = new Chart(ctx3, {
type: 'bar',
data: barChartData3,
options: {
elements: {
rectangle: {
backgroundColor: "rgba(151,187,205,0.5)",
borderWidth: 2,
borderColor: 'gray',
}
},
responsive: true,
legend: {
display: false,
position: 'right',
},
title: {
display: false,
text: 'Pressure'
}
}
});
}
</script>
</body>
</html>