带有 Angularjs 的 amCharts 在图表的值字段中显示未定义的对象答案

【问题标题】：amCharts with Angularjs showing undefined object in the value field of the chart带有 Angularjs 的 amCharts 在图表的值字段中显示未定义的对象
【发布时间】：2016-07-28 12:48:40
【问题描述】：

我是 angularjs 和 amcharts 的新手。我想要做的是我从控制器（asp.net 核心）发送一些 json 数据。数据被发送到 angularjs 控制器，然后假设使用 amCharts 创建一个基本图表。

在图表的类别字段中，我写的是“未定义”而不是国家/地区的名称。代码似乎运行良好，但我找不到错误。以下是我的代码。

以下是我从中发送用 asp.net 核心编写的数据的类和控制器。

  public class tempCountry
    {
        public string Country { get; set; }
        public int Visits { get; set; }

    }

    [HttpGet]
    public IActionResult Charts_Json()
    {
        List<tempCountry> tempCountry = new List<chartController.tempCountry>();

        tempCountry tObj = new tempCountry();
        tObj.Country = "Pakistan";
        tObj.Visits = 500;

        tempCountry.Add(tObj);

        tObj = new tempCountry();
        tObj.Country = "Japan";
        tObj.Visits = 1000;

        tempCountry.Add(tObj);

        tObj = new tempCountry();
        tObj.Country = "India";
        tObj.Visits = 3000;

        tempCountry.Add(tObj);

        tObj = new tempCountry();
        tObj.Country = "Austrailia";
        tObj.Visits = 4000;

        tempCountry.Add(tObj);

        return Json(tempCountry);


    }

以下是我的 Angularjs 控制器。

var myApp = angular.module("main", []);

myApp.controller("myController", function ($scope,$http) {

$http({
    method: "GET",
    url: "/chart/charts_json"
}).then(function mySuccess(response) {


    chartdata = response.data;
    var chart = new AmCharts.AmSerialChart();
    chart.dataProvider = response.data;
    chart.categoryFeild = "Country";
    var graph = new AmCharts.AmGraph();
    graph.valueField = "Visits";
    chart.addGraph(graph);
    chart.write('chartdiv');
});

});

以下查看代码（MVC asp.net core）。

@section scripts {
    <script src="~/js/amcharts/amcharts.js"></script>
    <script src="~/js/amcharts/serial.js"></script>
    <script src="~/lib/angular/angular.js"></script>
    <script src="~/js/mainApp.js"></script>
}
<p>this is the chart view page</p>
<body>
    <div ng-app="main">
        <div ng-controller="myController">
        </div>
    </div>
    <div id="chartdiv" style="width:640px; height: 480px;">
    </div>
</body>

以下是我得到的输出截图 enter image description here

【问题讨论】：

标签： asp.net angularjs asp.net-mvc undefined amcharts

【解决方案1】：

chart.category菲尔德 = "国家";

categoryFeild 不是有效的 amCharts 属性。

如果这就是您对属性的拼写方式，您可以在 amCharts 网站上编辑 column chart 并复制您使用 categoryFeild 生成的相同的 undefined 列名。

请尝试将 categoryFeild 替换为 categoryField。

https://docs.amcharts.com/3/javascriptstockchart/AmSerialChart#categoryField

【讨论】：

天哪，我真的很惊讶！这是错误的！无论如何！非常感谢帮助！