Настроить текст воздушного шара в круговой диаграмме amCharts

Question

Я создаю диаграмму 3D-пончиков, используя amCharts, и я хотел показать таблицу в тексте в виде воздушного шара, когда она перевернулась на кусочки пирога, как показано на приведенной ниже ссылке. Я хотел настроить таблицу в тексте шара, который будет показывать строку только по количеству элементов, которые она содержит, и не должен показывать лишние строки строк.

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.