标签在下钻饼图（amCharts）中裁剪

Question

我们使用amCharts实现了饼图。但是，当发生向下钻取时，会裁剪拉出的切片标签。我们如何解决这个问题呢？

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,
  }

} );

Answer 1

您可以针对此问题解决一些问题。您可以应用以下一种或组合：

1）降低radius属性。这样在拉出时会为切片标签留出更多空间。或者完全删除此参数。然后，图表将自动计算饼图半径，以便即使拉出标签也始终可见。

2）将pullOutRadius设置为比默认值20％更低的百分比值。这将使切片拉得更少。

3）通过设置maxLabelWidth（默认为200像素）来限制标签​​的宽度。这将使标签分成多行，有效地减少了它的宽度和被切断的机会。

Answer 2

按照AmCharts Tutorial“将饼图拟合成小容器”

1. 使图表容器更大。
2. 将其包裹在其他div周围，将图表限制在同一空间。

＃

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