Question

我正在绘制带有amcharts的条形图，我想在条形图的顶部显示百分比。所以下面是代码：

$.ajax({
    url: "https://daturl",
    contentType: "application/json; charset=utf-8",
    type: "GET",
    dataformat: "JSON",
    async: false,
    success: function (data) {
        var amc = AmCharts.makeChart("chartdiv",
        {
            "type": "serial",
            "dataProvider": data,
            "categoryField": "name",
            "startDuration": 1,
            "categoryAxis": {
                "gridPosition": "start"
            },
            "trendLines": [],
            "graphs": [
                {
                    "valueField": "count",
                    "fillColors": "#0095cc",
                    "type": "column",
                    "balloonText": "[[title]] of [[category]]:[[value]]",
                    "fillAlphas": 0.8,
                    "lineAlpha": 0.2,
                    "id": "AmGraph-1",
                    "title": "graph",
                    "labelText": " ",

                    //the percentage calculation function
                    "labelFunction": function (item, data) {
                        var total = 0;
                        console.log(data.length + " is the size of the data in long trips");

                        for (var i = 0; i < data.length; i++) {
                            total += data[i][item.graph.valueField];
                        }

                        var percent = Math.round((item.values.value / total) * 1000) / 10;
                        return percent + "%";
                    }
                }],
            "guides": [],
            "valueAxes": [
                {
                    "id": "ValueAxis-1",
                    "title": "Count",
                    "gridColor": "#FFFFFF",
                    "gridAlpha": 0.2
                }
            ],
            "categoryAxis": {
                "title": "Zone",
                "gridPosition": "start",
                "gridAlpha": 0,
                "tickPosition": "start",
                "tickLength": 20,
                "labelRotation": 24
            },
            "gridAboveGraphs": true,
            "allLabels": [],
            "balloon": {},
            "legend": {
                "enabled": true,
                "useGraphSettings": true
            },
            "titles": [
                {
                    "id": "Title-1",
                    "size": 15,
                    "text": "graph"
                }
            ]
        });
    },
    error: function () {
        alert("error while plotting down graph ");
    }
});

因此，当我运行代码时，图表正在绘制，但未显示百分比。相反，它们显示为NaN。任何帮助表示赞赏

Answer 1

您正在使用labelFunction错误。您可以在documentation中看到，给出的参数是对GraphDataItem的引用和格式化的标签文本。

在你的for循环中，你实际上total += " "[0]["value"]导致total += undefined并导致total为NaN。这就是错误标签的来源。

您可以通过item.graph.data访问完整的数据集并使用此进行正确的计算。

我的建议是，你将for循环移动到脚本中的另一个地方。无论何时绘制图形，您基本上只是一遍又一遍地总结数据值。这意味着当您调整图形大小时，此循环会运行数百到数千次。您只需计算一次总和，然后在labelFunction中使用它。

Amcharts中未显示的百分比

1 个答案: