javascript - 在 amcharts 条形图上显示百分比

Question

我是 Amcharts 的新手，我正在尝试在柱形图中显示数据的百分比。

var amc=AmCharts.makeChart("pickup_bar",
        {
    "type": "serial",
    "dataLoader": {
        "url": "the data url"
      },
    "categoryField": "distance",
    "startDuration": 1,
    "categoryAxis": {
        "gridPosition": "start"
    },
    "trendLines": [],
    "graphs": [
        {
        "valueField": "taxi",
        "fillColors":"#1E90FF",
        "type": "column",
        "balloonText": "[[title]] of [[category]]:[[value]]",
        "fillAlphas": 0.8,
        "lineAlpha": 0.2,
        "id": "AmGraph-1",
        "title": "Distance Traveled",

        "labelText": " ",
        "labelPosition": "inside",

        "labelFunction": function( item ) {
            var total = 0;
            for ( var i = 0; i < chart.dataLoader.length; i++ ) {
              total += chart.dataLoader[ i ][ item.graph.valueField ];
            }

            var percent = Math.round( ( item.values.value / total ) * 1000 ) / 10;
            return percent + "%";
          }
    }],
"guides": [],
"valueAxes": [
    {
        "id": "ValueAxis-1",
        "title": "Milage",
        "gridColor": "#FFFFFF",
        "gridAlpha": 0.2
    }
],
"categoryAxis": {
    "title": "(in Kilometers)"
  },
"gridAboveGraphs": true,
"allLabels": [],
"balloon": {},
"legend": {
    "enabled": true,
    "useGraphSettings": true
},
"titles": [
    {
        "id": "Title-1",
        "size": 15,
        "text": "Taxis Driving Distance "
    }
]
});

数据格式为json，如下

> [{"distance":"<50","taxi":309,"day":1},{"distance":"50-100","taxi":100,"day":1},{"distance":"100-200","taxi":300,"day":1},...]

图表正在加载，但当我删除该行时

"labelPosition": "inside",

显示图表，但不显示百分比。

有人可以帮忙吗？

Answer 1

您的代码中存在一些问题。

首先，您正在访问未定义的图表变量。您的代码将图表对象分配给 amc。您需要更改代码以匹配，或通过 item.graph.chart 访问图表实例。

其次，您将循环访问 labelFunction 中的 dataLoader 而不是 dataProvider。 dataLoader 对象不存储图表数据，它只是在从指定 URL 检索数据后将数据加载到图表的 dataLoader 中。这是您的固定 labelFunction:

    "labelFunction": function(item) { 
      var total = 0;
      var chart = item.graph.chart;
      for (var i = 0; i < chart.dataProvider.length; i++) {
        total += chart.dataProvider[i][item.graph.valueField];
      }

      var percent = Math.round((item.values.value / total) * 1000) / 10;
      return percent + "%";
    } 

在我进行这些更改后，标签将与您的数据一起显示。如果您仍然看不到标签，则可能您在有限的空间内拥有大量数据。默认情况下，如果图表不适合图表值标签，则不会呈现图表值标签。如果您想覆盖此行为，请设置图表的 showAllValueLabels属性为 true。

Demo