Amcharts 中未显示的百分比答案

【问题标题】：percentage not shown in AmchartsAmcharts 中未显示的百分比
【发布时间】：2017-04-03 03:01:11
【问题描述】：

我正在用 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。任何帮助表示赞赏

【问题讨论】：

标签： javascript ajax amcharts

【解决方案1】：

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

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

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

不过，我的建议是，将 for 循环移到脚本中的另一个位置。每当绘制图表时，您基本上只是一遍又一遍地总结数据值。这意味着当您调整图形大小时，此循环会运行数百到数千次。您可以只计算一次总和并在 labelFunction 中使用它。

【讨论】：