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()
        }
    ]
};

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

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

Answer 1

适用于我的情况。

＆＃13;

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"}
        ]
    };
}]);

＆＃13;

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

＆＃13;

它是否适用于任何特定情况？

Answer 2

如果您正在使用工厂尝试加载angular.module('myService', []) .factory('dataLoad', ['$http', function($http){ return { getData: function () { return $http.get('data.json'); } }; }])可用的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>

<强>模板

然后像往常一样：

gameButton.setPosition(0, 0); //x,y --absolute to bottom left corner
gameButton.setSize(200,200); //width, height

shopButton.setPosition(200, 0); //x,y --absolute to bottom left corner
shopButton.setSize(200,200); //width, height

FusionChart AngularJS：无法显示两个单独的图表“无数据显示”

2 个答案: