javascript - 自定义 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 .