来自 JSON 的 AMcharts 数据填充

Question

您好，我有一个正在呈现的图表，正在显示键以及列标题。

我的问题是我无法从我传递的值中生成实际的柱。

我的 php 代码没问题，我在返回数据时使用了函数 json_encode。这是传递给图表代码的返回数据：

[{"gid":"NickShare","Users":1},
{"gid":"admin","Users":2},
{"gid":"sharedTest","Users":2}]

这是我的 JQuery 图表代码：

  function supportsSVG() {
        return !!document.createElementNS && !!document.createElementNS('http://www.w3.org/2000/svg', "svg").createSVGRect;
    }
var token = $('#_token').val();
$.ajax({
    url: 'getShares',
    type: 'post',
    //  dataType:'json',
    data: {
        _token: token,

    },
    success: function (data, textStatus, jQxhr) {

        var DBData = jQuery.parseJSON(data);
        UserGroupsBar = new AmCharts.AmSerialChart();
       // var Data = [{}];

        UserGroupsBar.dataProvider = DBData;
        UserGroupsBar.startDuration = 1;
        UserGroupsBar.categoryField = "gid";

        $.each(DBData, function (i, item) {
          //  alert(item['Users']);
            if (item['Users'] > 0) {

               // Data[0][item['gid'] = item['Users']];
                var UserGroupGraph = new AmCharts.AmGraph();
                UserGroupGraph.id = item['gid'];
                UserGroupGraph.valueField = item['Users'];
                UserGroupGraph.title = item['gid'];
                UserGroupGraph.type = "column";
                UserGroupGraph.lineAlpha = 0;
                UserGroupGraph.fillAlphas = 1;
                UserGroupGraph.balloonText = "[[title]]: [[value]]";
                UserGroupsBar.addGraph(UserGroupGraph);
            }
        });

        UserGroupsBar.write("BarChart");

        var GroupValueAxis = new AmCharts.ValueAxis();
        GroupValueAxis.axisColor = "#DADADA";
        GroupValueAxis.gridAlpha = 0.1;
        GroupValueAxis.integersOnly = true;
        UserGroupsBar.addValueAxis(GroupValueAxis);
        UserGroupsBar.outlineColor = "#FFFFFF";
        UserGroupsBar.outlineAlpha = 0.2;
        UserGroupsBar.outlineThickness = 2;
        UserGroupsBar.startDuration = supportsSVG() ? 1 : 0;
        UserGroupsBar.depth3D = supportsSVG() ? 20 : 0;
        UserGroupsBar.angle = supportsSVG() ? 30 : 0;
        //Root Causes Legend
        GroupLegend = new AmCharts.AmLegend();
        UserGroupsBar.addLegend(GroupLegend, "Legend");
        GroupLegend.valueText = "";
        GroupLegend.align = "center";
        GroupLegend.position = "absolute";
        GroupLegend.marginTop = 30;
        GroupLegend.markerType = "circle";
        GroupLegend.labelWidth = 180;
        GroupLegend.fontSize = 10;
        GroupLegend.verticalGap = 20;
        // WRITE
        UserGroupsBar.write("BarChart");
    }


});

现在看来真的快要工作了，我知道我一定是漏掉了一些愚蠢的东西，但我已经盯着它看了很久了。任何指导将不胜感激。

干杯； NE

Answer 1

valueField 应该按名称指向数据中的实际字段，而您似乎正在分配其值。要修复替换此行：

UserGroupGraph.valueField = item['Users'];

进入这个：

UserGroupGraph.valueField = 'Users';

来自 JSON 的 AMcharts 数据填充

AMcharts data population from JSON

ajax

jquery

json

amcharts