在angularjs中使用没有指令的amCharts

Question

所以我试图在我的角度应用程序中使用amCharts，我尝试使用它作为指令，但它从未起作用，然后我决定使用它，因为它在其网站上有记录。但是，这也不起作用。

这是我放入控制器的内容：

var chartData = [{
        "country": "USA",
        "visits": 4252
    }, {
        "country": "China",
        "visits": 1882
    }, {
        "country": "Japan",
        "visits": 1809
    }, {
        "country": "Germany",
        "visits": 1322
    }, {
        "country": "UK",
        "visits": 1122
    }, {
        "country": "France",
        "visits": 1114
    }, {
        "country": "India",
        "visits": 984
    }, {
        "country": "Spain",
        "visits": 711
    }, {
        "country": "Netherlands",
        "visits": 665
    }, {
        "country": "Russia",
        "visits": 580
    }, {
        "country": "South Korea",
        "visits": 443
    }, {
        "country": "Canada",
        "visits": 441
    }, {
        "country": "Brazil",
        "visits": 395
    }, {
        "country": "Italy",
        "visits": 386
    }, {
        "country": "Australia",
        "visits": 384
    }, {
        "country": "Taiwan",
        "visits": 338
    }, {
        "country": "Poland",
        "visits": 328
    }];




    AmCharts.ready(function() {
        // chart code will go here
        var chart = new AmCharts.AmSerialChart();
        chart.dataProvider = chartData;
        chart.categoryField = "country";

        var graph = new AmCharts.AmGraph();
        graph.valueField = "visits";
        graph.type = "column";
        chart.addGraph(graph);

        chart.write('chartdiv');

    });

这是放在我的html文件中的内容

<div ng-controller="ReportsController as reportCtrl">


<h2>Reports</h2>
<br/>
<br/>
<div id="chartdiv" style="width: 640px; height: 400px;"></div>

似乎有些错误/缺失，任何帮助都会受到赞赏。 感谢。

Answer 1

文档的onload事件发生时发生

AmCharts.ready()。将代码置于AngularJS控制中意味着在此事件已经发生之后执行，这意味着代码永远不会被执行。

这里有两个选项：

1）从amCharts.ready()包装器中删除您的代码：

// chart code will go here
var chart = new AmCharts.AmSerialChart();
chart.dataProvider = chartData;
chart.categoryField = "country";

var graph = new AmCharts.AmGraph();
graph.valueField = "visits";
graph.type = "column";
chart.addGraph(graph);

chart.write('chartdiv');

2）或者，使用基于JSON的配置AmCharts.makeChart()函数：

// chart code will go here
AmCharts.makeChart( "chartdiv", {
  "type": "serial",
  "dataProvider": chartData,
  "categoryField": "country",
  "graphs": [ {
    "valueField": "visits",
    "type": "column"
  } ]
} );