javascript - Customize balloon text in amCharts pie chart - Stack Overflow

admin管理员组

文章数量:1432178

I am generating a 3D Donut chart by using amCharts and I wanted to show the table in balloon text when rolled over on pie pieces as shown in the below specified link. I wanted to customize the table in balloon text which will only show row as per the number of items it contains and shouldn't show the any extra row lines.

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();
} );

In the above link I have prepared a sample which contains dead people 3 and alive 6, in this whenever I rollover on the dead status (yellow color pie) it shows the name of the people who are dead and as the dead people are less then alive it shows 3 empty row which does not look good.

Can you help me show only number of rows according to the number of items. Any help is appreciated.

I am generating a 3D Donut chart by using amCharts and I wanted to show the table in balloon text when rolled over on pie pieces as shown in the below specified link. I wanted to customize the table in balloon text which will only show row as per the number of items it contains and shouldn't show the any extra row lines.

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();
} );

In the above link I have prepared a sample which contains dead people 3 and alive 6, in this whenever I rollover on the dead status (yellow color pie) it shows the name of the people who are dead and as the dead people are less then alive it shows 3 empty row which does not look good.

Can you help me show only number of rows according to the number of items. Any help is appreciated.

• javascript
• amcharts

Share Improve this question Follow edited Mar 27, 2016 at 17:20 martynasma 8,59522 gold badges3232 silver badges4747 bronze badges asked Mar 27, 2016 at 7:50 PratikPratik 2311 silver badge44 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 3

You can use balloonFunction for that. You can set it to a custom function that will take the slice data and format contents of the balloon.

"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;
}

Here's the updated demo.

本文标签： javascriptCustomize balloon text in amCharts pie chartStack Overflow