问饼图气球

EN

var chart = AmCharts.makeChart("chartdiv", {
  "type": "pie",
  "theme": "light",
  "dataProvider": [{
    "status": "Completed",
    "value": 100,
    "color": "#33cc33"
  }, {
    "status": "On-Going",
    "value": 59,
    "color": "#1a53ff"
  }, {
    "status": "PRE Procurement",
    "value": 36,
    "color": "#ff0066"
  }, {
    "status": "DED Prep",
    "value": 40,
    "color": "#cc66ff"
  }, {
    "status": "Under Prep / Not Yet Started",
    "value": 23,
    "color": "#999966"
  }, {
    "status": "Suspended",
    "value": 34,
    "color": "#663300"
  }, {
    "status": "Cancelled",
    "value": 23,
    "color": "#ff0000"
  }, {
    "status": "No Status Yet",
    "value": 21,
    "color": "#ffff66"
  }],
  "startDuration": 1,
  "balloon": {
    //"hideBalloonTime": 1000, // 1second
    "disableMouseEvents": false, // allow click
    "fixedPosition": true
  },
  "valueField": "value",
  "titleField": "status",
  "colorField": "color",
  "outlineAlpha": 0.4,
  "depth3D": 30,
  "balloonText": "<b>[[title]]</b><br><span style='font-size:14px'><b>[[value]]</b> ([[percents]]%)<br><a href='#' data-toggle='modal' data-target='#completed'>View Data</a></span>",
  "angle": 50,
  "export": {
    "enabled": true
  }
});

#chartdiv {
  width: 100%;
  height: 600px;
}

svg>g>g:last-child {
  pointer-events: none
}

<script src="//www.amcharts.com/lib/3/amcharts.js"></script>
<script src="//www.amcharts.com/lib/3/pie.js"></script>
<script src="//www.amcharts.com/lib/3/themes/light.js"></script>

<div id="chartdiv"></div>