Question

我正在使用amCharts生成3D甜甜圈图表，我希望在滚动的饼图上显示气球文本中的表格，如下面指定的链接所示。我想在气球文本中自定义表格，该表格仅根据其包含的项目数量显示行，不应显示任何额外的行行。

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。

在amCharts饼图

1 个答案: