Question

我试图在条形图中包含一些json值。我有json登录到控制台但不知道如何包含在图表的数据属性中。这是源json ......

{时间：＆＃34; 2016-07-03T21：29：57.987Z＆＃34 ;,温度：25.2，压力：98241，海拔：259.98737254818553}

由于

＆＃13;

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

＆＃13;

Answer 1

class Hello{

  String message;

  Hello(){
        HttpRequest.getString('/hello')
            .then((String content) {
              Map parsedMap = JSON.decode(content);
              message = parsedMap["Message"];
            });
  }
}

main() {
  reflector.reflectionCapabilities = new ReflectionCapabilities();
  bootstrap(AppComponent);
}

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

1 个答案: