如何在AmCharts中访问嵌套的Json数据

时间:2016-08-30 17:00:08

标签: angularjs amcharts

我在AngularJs应用程序中使用AmCharts,这是我得到的Json数据:

{
total: 2,
tools: [
{
id: "57c5a75d57d92f742dc96bf2",
empId: "1",
empName: "ABC",
empType: {
typeId: 3,
typeName: "Contract",
hours: 45,
}
},
{
id: "57c5a75d57d92f742dc96bf2",
empId: "2",
empName: "DEF",
empType: {
typeId: 2,
typeName: "Full-Time",
hours: 40,
}
},


]
}

我的控制器中的代码:

const writeemp = data => {
        const {
            total,
            employees,
        } = data;

        empChart.dataProvider = employees;
        empChart.write('emp');
        empChart.validateData();
    };

    AmCharts.handleLoad();

    var configChart = function () {


        empChart = new AmCharts.AmSerialChart();
        empChart.categoryField = "empId";
        empChart.labelRotation = 90;

        var yAxis = new AmCharts.ValueAxis();
        yAxis.position = "left";
        empChart.addValueAxis(yAxis);


        empBarGraph = new AmCharts.AmGraph();
        empBarGraph.valueField = "";//This to be the value "TypeName" in "empType" from the Json Data
        empBarGraph.type = "column";
        empBarGraph.fillAlphas = 1;
        empBarGraph.lineColor = "#f0ab00";
        empBarGraph.valueAxis = yAxis;
        empChart.addGraph(empBarGraph);
        empChart.write('empChart');


        $http.get(hostNameService.getHostName()+"/dashboard/employees")
            .then(response => writeemp(response.data));
    }

有人可以让我知道如何在Amcharts中访问嵌套的Json数据。我想在图表中将其中一个字段作为我的valueField。

1 个答案:

答案 0 :(得分:2)

AmCharts不支持嵌套的JSON集。您必须将数据重组为包含valueField(s)和categoryField的平坦对象数组。在你的情况下:

[
  {
    "empId": 1,
    "typeName": "Contract"
  },
// ...
]

请注意,图表只能支持值轴的数值,因此" typeName"不是一个合适的价值领域。