FusionChart AngularJS: 无法显示两个单独的图表 "No Data to display"

Question

代码与教程几乎相同。这是 HTML:

<div fusioncharts
    width="300"
    height="100"
    type="column2d"
    dataSource="{{myDataSource}}" >
</div>
<div fusioncharts
    width="300"
    height="100"
    type="column2d"
    dataSource="{{myDataSource2}}" >
</div>

这是我的 AngularJS 代码：

$scope.myDataSource = {
    chart: {
        caption: weekObject.week
    },
    data: [
        {
            label: "Saturday",
            value: weekObject.days[0]._FE_Items_Sold.toString()
        },
        {
            label: "Sunday",
            value: weekObject.days[1]._FE_Items_Sold.toString()
        },
        {
            label: "Monday",
            value: weekObject.days[2]._FE_Items_Sold.toString()
        },
        {
            label: "Tuesday",
            value: weekObject.days[3]._FE_Items_Sold.toString()
        },
        {
            label: "Wednesday",
            value: weekObject.days[4]._FE_Items_Sold.toString()
        },
        {
            label: "Thursday",
            value: weekObject.days[5]._FE_Items_Sold.toString()
        },
        {
            label: "Friday",
            value: weekObject.days[6]._FE_Items_Sold.toString()
        }
    ]
};
$scope.myDataSource2 = {
    chart: {
        caption: weekObject.week
    },
    data: [
        {
            label: "Saturday",
            value: weekObject.days[0]._FE_Transactions.toString()
        },
        {
            label: "Sunday",
            value: weekObject.days[1]._FE_Transactions.toString()
        },
        {
            label: "Monday",
            value: weekObject.days[2]._FE_Transactions.toString()
        },
        {
            label: "Tuesday",
            value: weekObject.days[3]._FE_Transactions.toString()
        },
        {
            label: "Wednesday",
            value: weekObject.days[4]._FE_Transactions.toString()
        },
        {
            label: "Thursday",
            value: weekObject.days[5]._FE_Transactions.toString()
        },
        {
            label: "Friday",
            value: weekObject.days[6]._FE_Transactions.toString()
        }
    ]
};

当我运行这样做时，我得到了要呈现的第一个图表。第二个只有短语 "No data to display." 我注意到即使使用第一张图，如果我将数据源命名为 "myDataSource" 以外的任何名称，它也不会呈现。这让我感到困惑，因为如果我不能引用多个数据变量进行绑定，我怎么可能拥有包含多个图表的页面呢？我觉得这更像是解决我的无知而不是解决我的代码类型问题但是..

问题：如何使用具有不同数据的 FushionCharts 渲染多个图形？

Answer 1

适用于我的情况。

var app = angular.module('dashApp', ["ng-fusioncharts"]);
        
app.controller('fusionController', ["$scope", function ($scope) {
    $scope.myDataSource1 = {
        chart: {caption: "Some week"},
        data: [
            {label: "Saturday", value: "100"},
            {label: "Sunday", value: "300"},
            {label: "Monday", value: "150"},
            {label: "Tuesday", value: "240"},
            {label: "Wednesday", value: "300"},
            {label: "Thursday", value: "90"},
            {label: "Friday", value: "170"}
        ]
    };

    $scope.myDataSource2 = {
        chart: {
            caption: "Some other week"
        },
        data: [
            {label: "Saturday", value: "1100"},
            {label: "Sunday", value: "1300"},
            {label: "Monday", value: "1150"},
            {label: "Tuesday", value: "1240"},
            {label: "Wednesday", value: "1300"},
            {label: "Thursday", value: "190"},
            {label: "Friday", value: "1170"}
        ]
    };
}]);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="http://static.fusioncharts.com/code/latest/fusioncharts.js"></script>
<script src="http://fusioncharts.github.io/angular-fusioncharts/demos/js/angular-fusioncharts.min.js"></script>
<body ng-app="dashApp">
    <div class="modal-body" ng-controller="fusionController">
        <div fusioncharts
            width="600"
            height="300"
            type="column2d"
            dataSource="{{myDataSource1}}" >
        </div>

        <div fusioncharts
            width="600"
            height="300"
            type="column2d"
            dataSource="{{myDataSource2}}" >
        </div>
    </div>
</body>

它是否不适用于任何特定场景？

Answer 2

如果您正在使用工厂尝试加载 $scope.myDataSource 可用的 data.json，这对我有用：

工厂

angular.module('myService', [])
  .factory('dataLoad', ['$http', function($http){
    return {
      getData: function () {
        return $http.get('data.json');
      }
    };
  }])

控制器

在控制器中，执行此操作：

// within your controller
// create an empty object 
$scope.myDataSource = {}; // this is kinda the trick. Without this,
                          // it complains of "No data to display"
dataLoad.getData()
    .success(function(data) {
        $scope.myDataSource = data;
    });

模板

然后像往常一样：

<fusioncharts width="600" height="500" type="column2d" dataSource="{{ myDataSource }}">
</fusioncharts>

FusionChart AngularJS: 无法显示两个单独的图表 "No Data to display"

FusionChart AngularJS: Cannot display two separate charts "No Data to display"

html

angularjs

charts

fusioncharts