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

コードにはいくつかの問題があります。

まず、定義されていないchart変数にアクセスしています。あなたのコードは、amcにグラフオブジェクトを割り当てています。コードを変更して一致させるか、item.graph.chartからチャートインスタンスにアクセスします。

第2に、dataProviderの代わりにlabelFunctionのdataLoaderをループしています。 dataLoaderオブジェクトはチャートデータを格納せず、指定されたURLからデータを取得した後にチャートのdataLoaderにデータをロードします。ここにあなたの固定ラベルがあります。

"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