FusionCharts feedData不是AngularJS中的函數

Question

我使用fusioncharts v3.9.0和AngularJs v1.4.3。它工作正常，但我需要實時更新圖表。 爲了實現這一點，我遵循本教程：feeding and retrieving data using javascript。 這是使用FusionCharts的指令，我的HTML：

<div fusioncharts 
    id="mychartContainer" 
    chartid="mychart" 
    width="99%" 
    height="98%" 
    type="area2d" 
    datasource="{{datasource1}}", 
    events="events1"> 
</div> 

我的控制器事件是這樣的：

var events1 = { 
    "rendered": function (evt, args) { 
       evt.sender.chartInterval = setInterval(function() { 
       //Get reference to the chart using its ID 
       var chartRef = evt.sender; 

       $http.post("mypost") 
        .success(function (response) { 
         if (response.success === true) { 
          var last = response.results[0]; 
          var strData = "&label=" + last.label + "&value=" + last.value; 
          chartRef.feedData(strData); 
         } 
        }); 
       }, 5000); 
       }, 
    "disposed": function (evt, arg) { 
       clearInterval(evt.sender.chartInterval); 
      } 
} 

所以我得到一個錯誤，當chartRef.feedData(strData);：TypeError: chartRef.feedData is not a function。

這是一個chartRefconsole.log：提前

謝謝！

Answer 1

我在問題中共享的代碼中發現的一個可能的小故障是所提及的chartType，即area2d。 ChartType需要爲realtimearea，以啓用實時功能。可以查看使用FusionCharts的實時圖表的幾個樣本here

以下是使用angular-fusioncharts在實時區域圖中說明feedData方法的示例片段。

var app = angular.module('HelloApp', ["ng-fusioncharts"]) 
 
app.controller('MyController', function($scope) { 
 
    $scope.dataSource = { 
 
    "chart": { 
 
     "caption": "Real-time stock price monitor", 
 
     "subCaption": "Harry's SuperMart", 
 
     "xAxisName": "Time", 
 
     "yAxisName": "Stock Price", 
 
     "refreshinterval": "2", 
 
     "yaxisminvalue": "35", 
 
     "yaxismaxvalue": "36", 
 
     "numdisplaysets": "10", 
 
     "labeldisplay": "rotate", 
 
     "showValues": "0", 
 
     "showRealTimeValue": "0", 
 
     "theme": "fint" 
 
    }, 
 
    "categories": [{ 
 
     "category": [{ 
 
     "label": "Day Start" 
 
     }] 
 
    }], 
 
    "dataset": [{ 
 
     "data": [{ 
 
     "value": "35.27" 
 
     }] 
 
    }] 
 
    }; 
 
    $scope.events = { 
 
    rendered: function(e) { 
 
     function addLeadingZero(num) { 
 
     return (num <= 9) ? ("0" + num) : num; 
 
     } 
 

 
     function updateData() { 
 
     var currDate = new Date(), 
 
      label = addLeadingZero(currDate.getHours()) + ":" + 
 
      addLeadingZero(currDate.getMinutes()) + ":" + 
 
      addLeadingZero(currDate.getSeconds()), 
 
      // Get random number between 35.25 & 35.75 - rounded to 2 decimal places 
 
      randomValue = Math.floor(Math.random() * 50)/100 + 35.25, 
 
      // Build Data String in format &label=...&value=... 
 
      strData = "&label=" + label + "&value=" + randomValue; 
 
     // Feed it to chart. 
 
     e.sender.feedData(strData); 
 
     } 
 

 
     var myVar = setInterval(function() { 
 
     updateData(); 
 
     }, 3000); 
 
    } 
 
    } 
 

 
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script> 
 
<script src="http://static.fusioncharts.com/code/latest/fusioncharts.js"></script> 
 
<script src="https://static.fusioncharts.com/code/latest/themes/fusioncharts.theme.fint.js"></script> 
 
<script src="http://fusioncharts.github.io/angular-fusioncharts/demos/js/angular-fusioncharts.min.js"></script> 
 

 
<div ng-app="HelloApp" ng-controller="MyController"> 
 
    <div fusioncharts id="stockRealTimeChart" width="500" height="250" type="realtimearea" , datasource="{{dataSource}}" events="events"></div> 
 
</div>

或用小提琴演奏here