使用json文件作为chart.js的数据源

Question

I am attempting to include some json values in a bar chart. 我正在尝试在条形图中包含一些json值。 I have the json logging to the console but not sure how to include in the data property for the chart. 我将json记录到控制台，但不确定如何将其包括在图表的data属性中。 Here is the source json... 这是源json ...

{time: "2016-07-03T21:29:57.987Z", temperature: 25.2, pressure: 98241, altitude: 259.98737254818553} {时间：“ 2016-07-03T21：29：57.987Z”，温度：25.2，压力：98241，海拔：259.98737254818553}

Thanks 谢谢

 <!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>

Answer 1

 <!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> <button id="updateDataset">Update Datasets</button> <script> $.getJSON("data.json", function (data) { time = data.time temp = data.temperature press = data.pressure alt = data.altitude console.log(time) var barChartData = { labels: ["Temperature"], datasets: [ { label: 'Temperature', data: [temp] } ] }; var barChartData2 = { labels : ["Pressure"], datasets : [ { label: 'Pressure', data : [press] } ] }; var barChartData3 = { labels : ["Altitude"], datasets : [ { label: 'Altitude', data : [alt] } ] }; 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: { display: false, position: 'right', }, title: { display: true, text: time } } } ); 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: true, text: time } } }); 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: true, text: time } } }); }) </script> </body> </html>

使用json文件作为chart.js的数据源

问题描述

1 个解决方案

解决方案1
0 已采纳 2016-07-05 21:52:44

使用json文件作为chart.js的数据源

问题描述

1 个解决方案

解决方案1 0 已采纳 2016-07-05 21:52:44

解决方案1
0 已采纳 2016-07-05 21:52:44