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

我的 Controller 事件看起来像这样:

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。

这是 chartRef 的 console.log:

提前致谢!

Answer 1

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

或者拉 fiddle here