标签在amCharts中被裁剪

Question

我附上了饼图图片。我的问题是饼图中的一些标签被裁剪。我该如何避免这个问题？

<div class="col-lg-4" style="position: relative;">
    <h3 style="text-align: center; margin-bottom: 10px;">STB Report Summary (Lyca TV)</h3> 
    im<div id="chartdiv3"  style="width:100%;height: 200px;"</div>
</div>

我的图表配置如下。

var chart3 = AmCharts.makeChart("chartdiv3", {
    "type": "pie",
    "theme": "light",
    "dataProvider": stock_control_report,
    "titleField": "title",
    "valueField": "value",
    "labelRadius": 5,
    "fontSize":"12",
    "radius": "42%",
    "innerRadius": "0%",
    "balloonText": "[[country]]<br><span style='font-size:14px'><b>[[value]]</b> ([[percents]]%)</span>",
    "labelText":"[[country]] [[value]]",
    "export": {
        "enabled": true
    }
});

chartdiv3是我用来加载图形的div。

Answer 1

通常情况下，图表会计算饼图的半径，以便所有标签都适合。但是，您已使用radius属性设置了固定的饼半径。

这里有几个解决方案：

1）删除radius行，让图表计算半径，以便一切适合。

var stock_control_report = [{
  "title": "Configured",
  "value": 6033
}, {
  "title": "Agent allocated",
  "value": 487
}, {
  "title": "Slice 3",
  "value": 199
}, {
  "title": "Slice 4",
  "value": 100
}]

var chart3 = AmCharts.makeChart("chartdiv3", {
    "type": "pie",
    "theme": "light",
    "dataProvider": stock_control_report,
    "titleField": "title",
    "valueField": "value",
    "labelRadius": 5,
    "fontSize":"12",
    //"radius": "42%",
    "innerRadius": "0%",
    "balloonText": "[[title]]<br><span style='font-size:14px'><b>[[value]]</b> ([[percents]]%)</span>",
    "labelText":"[[title]] [[value]]",
    "export": {
        "enabled": true
    }
});

<script src="http://www.amcharts.com/lib/3/amcharts.js"></script>
<script src="http://www.amcharts.com/lib/3/pie.js"></script>
<script src="http://www.amcharts.com/lib/3/themes/light.js"></script>
<div id="chartdiv3" style="width: 340px; height: 200px;"></div>

2）使用startAngle旋转图表，使小标签偏向一边，而不是向上：

var stock_control_report = [{
  "title": "Configured",
  "value": 6033
}, {
  "title": "Agent allocated",
  "value": 487
}, {
  "title": "Slice 3",
  "value": 199
}, {
  "title": "Slice 4",
  "value": 100
}]

var chart3 = AmCharts.makeChart("chartdiv3", {
    "type": "pie",
    "theme": "light",
    "dataProvider": stock_control_report,
    "titleField": "title",
    "valueField": "value",
    "labelRadius": 5,
    "fontSize":"12",
    "radius": "40%",
    "startAngle": 55,
  "maxLabelWidth": 100,
    "innerRadius": "0%",
    "balloonText": "[[title]]<br><span style='font-size:14px'><b>[[value]]</b> ([[percents]]%)</span>",
    "labelText":"[[title]] [[value]]",
    "export": {
        "enabled": true
    }
});

<script src="http://www.amcharts.com/lib/3/amcharts.js"></script>
<script src="http://www.amcharts.com/lib/3/pie.js"></script>
<script src="http://www.amcharts.com/lib/3/themes/light.js"></script>
<div id="chartdiv3" style="width: 340px; height: 200px;"></div>