无法在angularjs中呈现融合图表

Question

我正在尝试使用角度融合图表，以下是我的代码

 <div class="col-md-8">
    <fc-chart fc-chart-type="Bar2D" fc-data="{{myDataSource}}"></fc-chart>
 </div> 

和在控制器中

      $scope.myDataSource = {
        chart: {
            caption: "Harry's SuperMart",
            subCaption: "Top 5 stores in last month by revenue",
            numberPrefix: "$",
            theme: "fint"
        },
        data: [{
            label: "Bakersfield Central",
            value: "880000"
        }, {
            label: "Garden Groove harbour",
            value: "730000"
        }, {
            label: "Los Angeles Topanga",
            value: "590000"
        }, {
            label: "Compton-Rancho Dom",
            value: "520000"
        }, {
            label: "Daly City Serramonte",
            value: "330000"
        }]
    };

我已经依次添加了fusioncharts.js文件，angular.js文件和angular-fusioncharts.js文件。但是仍然不能在浏览器上呈现fusionchart。

Answer 1

有关工作示例，请参阅http://jsfiddle.net/ayanonly1/fvwtkjv9/。

HTML代码：

<div >
 <fusioncharts  id="mychartcontainer"  chartid="mychart" width="400"  height="200" type="column2d" datasource="{{myDataSource}}" ></fusioncharts>
</div>

JS代码：

var app = angular.module('HelloApp', ["ng-fusioncharts"]);

app.controller('MyController', function ($scope) {
    $scope.myDataSource = {
        chart: {
            caption: "Harry's SuperMart",
            subCaption: "Top 5 stores in last month by revenue",
            numberPrefix: "$"
        },
        data: [{
            label: "Bakersfield Central",
            value: "880000"
        }, {
            label: "Garden Groove harbour",
            value: "730000"
        }, {
            label: "Los Angeles Topanga",
            value: "590000"
        }, {
            label: "Compton-Rancho Dom",
            value: "520000"
        }, {
            label: "Daly City Serramonte",
            value: "330000"
        }]
    };

});

对于官方存储库和文档，您可以参考https://github.com/fusioncharts/angular-fusioncharts。

Answer 2

请注意，有些示例遗漏了引用。

请务必将这两个文件都添加进来！

    <!-- FusionCharts library-->
    <script type="text/javascript" src="fusioncharts.js"></script>
    <script type="text/javascript" src="fusioncharts.charts.js"></script>

以下是一篇对我有帮助的文章的链接：https://davidwalsh.name/angular-charts

Answer 3

首先使用以下方式初始化$scope.myDataSource，然后分配辅助数据源。应该能行得通。

$scope.myDataSource = {};