无法使用 angularjs 加载 fusioncharts答案

【问题标题】：Not able to load fusioncharts with angularjs无法使用 angularjs 加载 fusioncharts
【发布时间】：2019-07-29 05:56:57
【问题描述】：

我正在尝试使用 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>

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

数据中可能存在什么问题。

【问题讨论】：

通常是那些.... 的部分代表代码中缺少的部分，这些部分是造成实际错误的原因。请创建一个真实 minimal reproducible example
错误文本也请在此处粘贴为文本，并格式化。

标签： angularjs fusioncharts

【解决方案1】：

我能猜到的主要原因是 ng-fusioncharts 模块没有在 html 中以这种状态加载：

您也在使用什么来构建脚本/html？如果它是 gulp，你可以使用这个： https://www.npmjs.com/package/gulp-angular-filesort 如果您是手动操作，只需更改顺序如果你会使用 webpack，我相信它会自动为你完成 ..

html中的顺序应该是示意性的：

AngularJS
fusioncharts
ng-fusioncharts
myApp

【讨论】：

那应该是什么顺序呢？我先添加了 angular 库，然后添加了 fusion charts 库
Angular ng-fusioncharts myApp
我已经按照您提到的顺序添加了库。 AngularJS 的版本可能会导致问题

【解决方案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/

【讨论】：

我试过你的sn-p，但结果和图片中提到的一样。
请检查上面的演示它在我的最后工作正常。还要检查最新的 angular-fusioncharts 插件和 fusioncharts 版本
我用过最新的angular-fusioncharts插件和fusioncharts版本