Этикетки обрезаны в 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 линию и пусть радиус диаграммы CALCulate так все подходит.

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>