amCharts円グラフのバルーンテキストをカスタマイズする

Question

amChartsを使用して3Dドーナツチャートを生成しています。以下のリンクに示すように、円の上にロールオーバーすると表をバルーンテキストで表示したかったのです。私はバルーンテキストで表をカスタマイズしたかったのですが、その表には項目の数だけ行が表示され、余分な行行は表示されません。上記のリンクで

http://codepen.io/PratikDJ/pen/WwOXmr

var balloonText = '<p style="font-size: 120%; font-weight: bold; margin-bottom: 15px;"></p>\ 
      <table>\ 
      <tr><th>People Name</th></tr>\ 
      <tr><td>[[people1]]</td></tr>\ 
      <tr><td>[[people2]]</td></tr>\ 
      <tr><td>[[people3]]</td></tr>\ 
      <tr><td>[[people4]]</td></tr>\ 
      <tr><td>[[people5]]</td></tr>\ 
      <tr><td>[[people6]]</td></tr>\ 
      </table>'; 
var chart = AmCharts.makeChart("chartdiv", { 
    "type": "pie", 
    "theme": "light", 
    "titles": [ { 
    "text": "", 
    "size": 16 
    } ], 
    "dataProvider": [ 
    { 
     "Status": "alive", 
     "NoOPeople": 5, 
     "people1": "ajith", 
     "people2": "rahul", 
     "people3": "gaurav", 
     "people4": "abhay", 
     "people5": "ganesh", 
     "people6": "gopi" 
    }, 
    { 
     "Status": "dead", 
     "NoOPeople": 3, 
     "people1": "suraj", 
     "people2": "chethan", 
     "people3": "subhash" 
    } 
], 
    "valueField": "NoOPeople", 
    "titleField": "Status", 
    "startEffect": "elastic", 
    "startDuration": 2, 
    "labelRadius": 15, 
    "innerRadius": "50%", 
    "depth3D": 10, 
    "balloonText": balloonText, 
    "angle": 15, 
    "export": { 
    "enabled": true 
    } 
}); 
jQuery('.chart-input').off().on('input change', function() { 
    var property = jQuery(this).data('property'); 
    var target = chart; 
    var value = Number(this.value); 
    chart.startDuration = 0; 

    if (property == 'innerRadius') { 
    value += "%"; 
    } 

    target[ property ] = value; 
    chart.validateNow(); 
}); 

私が死んだ状態（黄色パイ）にロールオーバーするたびに私はそれがの名前を示し、この中で、死者3と生きている6が含まれているサンプルを用意しています死んでいる人々が死んでいる人は生きていないので、それはよく見えない3つの空の行を示しています。

アイテム数に応じて行数を表示するのに役立ちますか？ 何か助けていただければ幸いです。

Answer 1

これにはballoonFunctionを使用できます。バルーンのスライスデータと書式設定内容を取得するカスタム関数に設定することができます。

"balloonFunction": function(item, content) { 
    var html = '<p style="font-size: 120%; font-weight: bold; margin-bottom: 15px;"></p>\ 
    <table>\ 
    <tr><th>People Name</th></tr>'; 
    for (var x in item.dataContext) { 
    if (item.dataContext.hasOwnProperty(x) && x.match(/^people/)) { 
     html += '<tr><td>' + item.dataContext[ x ] + '</td></tr>'; 
    } 
    } 
    html += '</table>'; 
    return html; 
} 

ここではupdated demoです。