puffing
diff --git a/‎chart-3d.png
83.8 KB b/‎chart-3d.png
83.8 KB
diff --git a/‎highcharts.html
Lines changed: 81 additions & 0 deletions b/‎highcharts.html
Lines changed: 81 additions & 0 deletions
diff --git a/‎js/exporting.js
Lines changed: 26 additions & 0 deletions b/‎js/exporting.js
Lines changed: 26 additions & 0 deletions
@@ -0,0 +1,81 @@
+<!DOCTYPE html>
+<html>
+	<head>
+		<meta charset="UTF-8">
+		<title>月消费饼状图</title>
+		<script src="js/jquery.min.js"></script>
+		<script src="js/highcharts.js"></script>
+		<script src="js/highcharts-3d.js"></script>
+		<script src="js/exporting.js"></script>
+		<style>
+			#pie{
+				width:500px;
+				height:500px;
+			}
+		</style>
+	</head>
+	<body>
+		<div id="pie"></div>
+		<script>
+//			875.2
+			$('#pie').highcharts({
+				title:{
+					text:'月消费饼状图'
+				},
+				chart:{
+					type:'pie',// 定义图标类型为饼状图
+					options3d:{// 设置3d信息
+						enabled:true,
+						alpha:30,//围绕x轴旋转的度数
+						beta:0//围绕y轴旋转的度数
+					}
+				},
+				series:[{
+					type:'pie',
+					name:'花费',
+					data:[
+						{
+						  name: '饮食',
+						  y:24,
+						  sliced: true,//默认选中
+						  selected: true//设置点其他的时候，合拢
+						},
+						['生活日用',24],
+						['交通出行',15],
+						['通讯物流',1],
+						['文教娱乐',10],
+						['人情往来',15],
+						['其他',11]
+					]
+				}],
+				tooltip: {
+						pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
+						},
+				plotOptions:{
+					pie:{
+						allowPointSelect: true,//是否允许选择
+						cursor:'pointer',
+						depth:35,//3d视图的深度
+							dataLabels: {
+								enabled: true,
+								format: '<b>{point.name}</b>: {point.percentage:.1f} %'
+						}
+					}
+				},
+				credits:{
+					text:"author:puff",
+					href:"https://github.com/puffing/highcharts02",
+					style:{
+						color:'green',
+						fontWeight:'bold',
+						fontSize:'14px'
+					},
+					position:{
+						y:-20
+					}
+					
+				}
+			})
+		</script>
+	</body>
+</html>