Question

我正在尝试从实时Firebase加载数据并将数据（json对象）放入图表中。问题是，当我在console.log中打印对象时，数据正确显示，但图表上没有任何显示。只有一个空图表，没有预期的折线。这是我的firebase的外观： https://i.stack.imgur.com/ZXlQE.png

//Initialize Firebase
var config = {
  apiKey: "AIzaSyCRcvZ6geLt2jLOAQlfdJeRGQSvCudwUzY",
  authDomain: "parkinsonstest.firebaseapp.com",
  databaseURL: "https://parkinsonstest.firebaseio.com",
  projectId: "parkinsonstest",
  storageBucket: "parkinsonstest.appspot.com",
  messagingSenderId: "866715324817"
};
firebase.initializeApp(config);

<!doctype html>
<html>

<head>
  <title>Firebase Basic Example</title>
  <!-- including FusionCharts core package JS files -->
  <script src="https://static.fusioncharts.com/code/latest/fusioncharts.js"></script>


  <!-- including Firebase -->
  <script src="https://www.gstatic.com/firebasejs/5.8.0/firebase-app.js"></script>
  <script src="https://www.gstatic.com/firebasejs/5.8.0/firebase-database.js"></script>
  <script src="assets/scripts/app.js"></script>
  <script>
    window.addEventListener("load", getData(genFunction));

    function getData(callbackIN) {
      var ref = firebase.database().ref("data");
      ref.once('value').then(function(snapshot) {
        callbackIN(snapshot.val())
      });
    }

    function genFunction(data) {
      var cdata = [];
      var len = data.length;

      for (var i = 1; i < len; i++) {
        cdata.push({
          time: data[i].time,
          x: data[i].x
        });
      }
      var labels = cdata.map(function(e) {
        return e.time;
      });
      var data = cdata.map(function(e) {
        return e.x;
      });;
      console.log(labels);
      console.log(data);


      var firebaseChart = new FusionCharts({
        type: 'area2d',
        renderAt: 'chart-container',
        width: '500',
        height: '350',
        dataFormat: 'json',
        dataSource: {
          "chart": {
            "caption": "Parkinsons Test",
            "subCaption": "X(t)",
            "subCaptionFontBold": "0",
            "captionFontSize": "20",
            "subCaptionFontSize": "17",
            "captionPadding": "15",
            "captionFontColor": "#8C8C8C",
            "yaxisname": "x",
            "numbersuffix": " mph",
            "rotatelabels": "1",
            "setadaptiveymin": "1",
            "theme": "fusion"
          },
          "data": labels,
          data

        }
      }).render();

      // firebaseChart.render();
      console.log(cdata);
    }
  </script>
</head>

<body>
  <div id="chart-container">
    <svg width="90px" height="90px" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid" class="lds-rolling" style="background: none;"><circle cx="50" cy="50" fill="none" ng-attr-stroke="{{config.color}}" ng-attr-stroke-width="{{config.width}}" ng-attr-r="{{config.radius}}" ng-attr-stroke-dasharray="{{config.dasharray}}" stroke="#6ac1a5" stroke-width="9" r="33" stroke-dasharray="155.50883635269477 53.83627878423159" transform="rotate(324 50 50)"><animateTransform attributeName="transform" type="rotate" calcMode="linear" values="0 50 50;360 50 50" keyTimes="0;1" dur="1s" begin="0s" repeatCount="indefinite"></animateTransform></circle></svg></div>
</body>

</html>

为什么图表不显示？

使用Firebase的FusionChart（javascript）

0 个答案: