Amchart 3D饼图
程序员文章站
2022-07-13 09:12:41
...
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
#chartdiv {
width: 100%;
height: 500px;
}
</style>
</head>
<body>
<div id="chartdiv"></div>
<!-- Resources -->
<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/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" />
<script src="https://www.amcharts.com/lib/3/themes/light.js"></script>
<!-- Chart code -->
<script>
var chart = AmCharts.makeChart( "chartdiv", {
"type": "pie",
"theme": "light",
"dataProvider": [ {
"country": "Lithuania",
"value": 260
}, {
"country": "Ireland",
"value": 201
}, {
"country": "Germany",
"value": 65
}, {
"country": "Australia",
"value": 39
}, {
"country": "UK",
"value": 19
}, {
"country": "Latvia",
"value": 10
} ],
"valueField": "value",
"titleField": "country",
"outlineAlpha": 0.4,
"depth3D": 15,
"balloonText": "[[title]]<br><span style='font-size:14px'><b>[[value]]</b> ([[percents]]%)</span>",
"angle": 30,
"export": {
"enabled": true//是否支持下载
}
} );
</script>
</body>
</html>"labelText": "[[value]]",//饼图上显示数值"labelRadius": -15,//文字偏移量配合labelText使用qq:3229835419
有其他问题一起讨论学习。
上一篇： 【3D游戏编程】3. 空间与运动
下一篇： Three.js 3d 轮播图，圆形轨迹