Labels are cropped in drill-down pie chart (amCharts)

问题

We have implemented pie chart using amCharts. But when drill down occurs, the pulled slices label are cropped. How can we fix this issue?

chart = AmCharts.makeChart( "chart_1", {
  "type": "pie",
  "autoMargins": false,
  "marginRight": 10,
  "marginBottom": 10,
  "dataProvider": generateChartData(),
  "titleField": "SubTypeName",
  "valueField": "Weight",
  "outlineColor": "#FFFFFF",
  "colorField": "Color",
  "balloonText": "[[title]]<br><span style='font-size:14px'><b>[[value]]</b> ([[percents]]%)</span>",
  "pulledField": "pulled",
  "addClassNames": true,

  "labelRadius": 3,
  "radius": "40%",
  "innerRadius": "30%",

  "angle": 25,
  "depth3D": 13,

  "legend": {
    "autoMargins": false,
    "marginTop": 10,
    "marginBottom": 10,
  }

} );

回答1:

There are a few things you can do work around this issue. You can apply one or combination of the below:

1) Lower radius property. This will leave more room for slice labels when pulled out. Or remove this parameter altogether. The chart will then auto-calculate the pie radius so that labels are always visible even if pulled out.

2) Set pullOutRadius to some lower percent value than default 20%. This will make slices pull out less.

3) Limit width of the labels by setting maxLabelWidth (default 200 pixels). This will make the labels break into multiple lines, effectively reducing it's width and chance being cut off.

回答2:

Follow this AmCharts Tutorial "Fitting pie charts into small containers"

Make the chart container bigger.
Wrap it around some other div to confine the chart to the same space.

#chartwrapper{
 position: relative;
 width: 200px;
 height: 200px;
}
#chartdiv  {
  position: absolute;
  top: -30px;
  left: -30px;
  width : 260px;
  height : 260px;
}

来源：https://stackoverflow.com/questions/32308408/labels-are-cropped-in-drill-down-pie-chart-amcharts

标签

amcharts