自定义amCharts饼图中的气球文本

Customize balloon text in amCharts pie chart

本文关键字：气球 文本 amCharts 自定义      更新时间：2023-09-26

我正在使用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个空行，这看起来不太好。

你能帮我根据项目的数量只显示行数吗。感谢您的帮助。

您可以使用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;
}

这是更新的演示。

相关文章：