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文件。但仍然无法在浏览器上渲染融合图。

Answer 1

请参阅http://jsfiddle.net/ayanonly1/fvwtkjv9/了解工作样本。

HTML code：

<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，然后分配acual数据源。它应该工作。

$scope.myDataSource = {};

Answer 4

在应用中，将 ng-fusioncharts 包含为依赖项。

angular.module("myApp", ["ng-fusioncharts"])

无法在angularjs中渲染融合图表

4 个答案: