在圆环图中显示“数据”中的值 - AmCharts

时间:2017-07-04 10:14:33

标签: charts pie-chart amcharts donut-chart

我试图在饼图圆圈图的内半径内显示动态值(来自后端)(通常是百分比值)。 你能救我吗?

感谢

1 个答案:

答案 0 :(得分:0)

您可以在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>