在 angularjs 中使用不带指令的 amCharts

Question

所以我尝试在我的 angular 应用程序中使用 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>

似乎有问题 wrong/missing，如有任何帮助，我们将不胜感激。谢谢

Answer 1

AmCharts.ready() 发生在文档的 onload 事件发生时。将代码放在 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" } ] } );

在 angularjs 中使用不带指令的 amCharts

using amCharts without directive in angularjs

javascript

amcharts

angularjs