jsonファイルをchart.jsのデータソースとして使用する

棒グラフにいくつかのjson値を含めることを試みています。私はコンソールにログオンするjsonを持っていますが、グラフのデータプロパティにどのようにインクルードするかはわかりません。おかげjsonファイルをchart.jsのデータソースとして使用する

ここでソースJSONは{259.98737254818553： "2016-07-03T21：29：57.987Z"、温度：25.2、圧力：98241、高度時間} ...

あります

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

出典

2016-07-04 cgulliver

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

出典

2016-07-05 21:52:44 cgulliver

jsonファイルをchart.jsのデータソースとして使用する

答えて

関連する問題