javascript - 无法在 angularjs 中呈现融合图表

Question

我正在尝试使用 Angular 融合图表，下面是我的代码

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

在 Controller 中

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