FusionChart AngularJS：无法显示两个单独的图表“没有要显示的数据”答案

【问题标题】：FusionChart AngularJS: Cannot display two separate charts "No Data to display"FusionChart AngularJS：无法显示两个单独的图表“没有要显示的数据”
【发布时间】：2016-07-26 16:46:15
【问题描述】：

代码与教程中的代码几乎相同。这是 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()
        }
    ]
};

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

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

【问题讨论】：

因为我的脚本是在 createChart 函数中完成的，但没有显示它不起作用。这是因为正如我在下面所说的，我需要初始化这两个变量。如果您按照静态答案中的方式进行操作，那么显然不需要初始化。仅供参考

标签： html angularjs charts fusioncharts

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

它不适用于任何特定情况吗？

【讨论】：

是的，这也对我有用。我遇到的问题源于没有声明“myDataSource [1-2]”。不知道为什么会这样，但是一旦我在控制器的开头声明了“var myDataSource2 = {}”，它就起作用了。
你能看看我的问题，也许你会有一个想法stackoverflow.com/questions/37256487/…

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

【讨论】：