javascript - FusionCharts feedData不是AngularJS中的函数

我正在将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时出现错误。

这是console.log的chartRef：


提前致谢！

最佳答案

在问题共享的代码中，我发现的可能故障之一是提到的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

关于javascript - FusionCharts feedData不是AngularJS中的函数，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/38642756/