charts - 在圆环图内显示 "data"的值 - AmCharts

Question

我试图在饼图的内半径内显示一个动态值(来自后端)(通常是一个百分比值)。
你能帮助我吗？

谢谢

Answer 1

您可以在 allLabels 中添加标签.另一种选择是 add the label图表启动后:

chart.addListener("init", function (e) {
    e.chart.addLabel(...);
});

var chart = AmCharts.makeChart("chartdiv", {
    "type": "pie",
    "theme": "light",
    "innerRadius": "40%",
    "gradientRatio": [-0.4, -0.4, -0.4, -0.4, -0.4, -0.4, 0, 0.1, 0.2, 0.1, 0, -0.2, -0.5],
    "dataProvider": [{
        "country": "Lithuania",
        "litres": 501.9
    }, {
        "country": "Czech Republic",
        "litres": 301.9
    }, {
        "country": "Ireland",
        "litres": 201.1
    }, {
        "country": "Germany",
        "litres": 165.8
    }, {
        "country": "Australia",
        "litres": 139.9
    }, {
        "country": "Austria",
        "litres": 128.3
    }],
    "balloonText": "[[value]]",
    "valueField": "litres",
    "titleField": "country",
    "balloon": {
        "drop": true,
        "adjustBorderColor": false,
        "color": "#FFFFFF",
        "fontSize": 16
    },
  "allLabels": [{
    "y": "47%",
    "align": "center",
    "size": 20,
    "bold": true,
    "color": "#555",
    "text": "30%"
  }],
    "export": {
        "enabled": true
    }
});

#chartdiv {
	width		: 100%;
	height		: 500px;
	font-size	: 11px;
}							

<script src="https://www.amcharts.com/lib/3/amcharts.js"></script>
<script src="https://www.amcharts.com/lib/3/pie.js"></script>
<script src="https://www.amcharts.com/lib/3/themes/light.js"></script>
<script src="https://www.amcharts.com/lib/3/plugins/export/export.min.js"></script>
<link rel="stylesheet" href="https://www.amcharts.com/lib/3/plugins/export/export.css" type="text/css" media="all" />
<div id="chartdiv"></div>