Question

我正在尝试使用AngularJS将融合图加载到我的网页中。

我在AngularJs中具有以下控制器代码。

angular.module('myApp').controller('myCenter',myCenter);
myCenter.$inject = ['$scope','myCentre','$rootScope'];
function myCenter($scope, myCentre,$rootScope) {
    $scope.myData = [];
    $scope.myDataSource = {
                "chart": {
                    "caption": "Dummy Data",
                    "subCaption": "Dummy Data",
                    "xAxisName": "Dummy Data",
                    "yAxisName": "Dummy Data",
                    "numberSuffix": "K",
                    "theme": "fusion",
                },
                "data": [{
                    "label": "Venezuela",
                    "value": "290"
                }, {
                    "label": "Saudi",
                    "value": "260"
                }, {
                    "label": "Canada",
                    "value": "180"
                }, {
                    "label": "Iran",
                    "value": "140"
                }, {
                    "label": "Russia",
                    "value": "115"
                }, {
                    "label": "UAE",
                    "value": "100"
                }, {
                    "label": "US",
                    "value": "30"
                }, {
                    "label": "China",
                    "value": "30"
                }]
            };
}

控制台上出现以下错误。

添加了以下HTML。

<div fusioncharts id="my-chart-id" width="700" height="400" type="column2d" dataSource="{{myDataSource}}">
</div>

我无法识别该错误。

编辑1：-

仅通过更改单行中的 myDataSource 数组，然后在其周围添加单引号，就可以消除该问题。

$scope.myDataSource = '{ "chart": { "caption": "Dummy Data", "subCaption": "Dummy Data", "xAxisName": "Dummy Data", "yAxisName": "Dummy Data", "numberSuffix": "K" }, "theme": "fusion", "data": [{ "label": "Venezuela", "value": "290" }, { "label": "Saudi", "value": "260" }, { "label": "Canada", "value": "180" }, { "label": "Iran", "value": "140" }, { "label": "Russia", "value": "115" }, { "label": "UAE", "value": "100" }, { "label": "US", "value": "30" }, { "label": "China", "value": "30" }]}';

并按如下所示编辑HTML

<fusioncharts id="chartcontainer" chartid="chart1" width="100%" height="450" type="column2d" dataFormat= "json" dataSource="{{myDataSource}}"></fusioncharts>

此编辑后，出现消息而不是图表正在加载图表，请稍候。

数据中可能有什么问题。

Answer 1

我可以猜到的主要原因是html-ng-fusioncharts模块在此状态下未加载：

您还使用什么来构建脚本/ html？如果是大口吃，您可以使用以下方法： https://www.npmjs.com/package/gulp-angular-filesort 如果您是手动操作，只需更改顺序如果您将使用webpack，我相信它将自动为您做..

html中的顺序应该用示意图表示：

AngularJS
fusioncharts
ng-fusioncharts
myApp

Answer 2

以下是根据您的上述数据得出的有效示例

查看

<html ng-app="HelloApp">

  <body ng-controller="MyController">

    <fusioncharts id="mychartcontainer" chartid="mychart" width="{{width}}" height="400" type="{{type}}" dataSource="{{dataSource}}"></fusioncharts>


  </body>

</html>

控制器

var app = angular.module('HelloApp', ["ng-fusioncharts"])
app.controller('MyController', function($scope) {
  $scope.type = "column2d";
  $scope.width = 600;
  $scope.dataSource = {
    "chart": {
      "caption": "Dummy Data",
      "subCaption": "Dummy Data",
      "xAxisName": "Dummy Data",
      "yAxisName": "Dummy Data",
      "numberSuffix": "K",
      "theme": "fusion",
    },
    "data": [{
      "label": "Venezuela",
      "value": "290"
    }, {
      "label": "Saudi",
      "value": "260"
    }, {
      "label": "Canada",
      "value": "180"
    }, {
      "label": "Iran",
      "value": "140"
    }, {
      "label": "Russia",
      "value": "115"
    }, {
      "label": "UAE",
      "value": "100"
    }, {
      "label": "US",
      "value": "30"
    }, {
      "label": "China",
      "value": "30"
    }]
  };


});

这是一个演示-http://jsfiddle.net/1k07wvop/

无法使用angularjs加载FusionCharts

2 个答案: