Highcharts3D饼图的使用

# 官方文档入口

   highcharts官网地址：https://www.hcharts.cn/

   API文档地址：https://api.hcharts.cn/highcharts

   使用教程地址：https://www.hcharts.cn/docs

   highcharts菜鸟教程：http://www.runoob.com/highcharts/highcharts-tutorial.html

1. Highcharts引入

   可以通过以下方式引入外部资源：

   (1）直接引用提供的CDN服务。

<script src="http://cdn.hcharts.cn/highcharts/highcharts.js"></script>
<script src="http://cdn.hcharts.cn/highcharts/highcharts-3d.js"></script> 

 （2）通过 官网下载获取资源包，资源包包含所有相关文件的源代码及压缩版本解压后copy到源码中使用，过程中需要注意引入文件时候的文件路径问题（考虑使用绝对路径还是相对路径），如果无法正常使用建议使用CDN服务测试是否能够创建图表。

<script src="Highcharts/code/highcharts.js"></script>
<script src="Highcharts/code/highcharts-3d.js"></script>

2. 创建3D饼图

    创建DIV

<div id="echarDiv1" style="height:255px; width:100%; "></div>

    在ajax中引入饼图

$.ajax({                url : encodeURI(url),
						type : "get",
						cache : false,
						async : false,
						datatype : "text",
						success : function(data) {
							data = eval(data);
							echar1ElectricArr = [ [ '数据1', 1 ],
									[ '数据1', 2 ] ];
							echar1WaterArr = [ [ '数据2', 3 ],
									[ '数据4', 4 ] ];

							var optiontotal = {
								chart : {
									plotBackgroundColor : null,
									//plotBorderWidth: 1,//null,
									plotShadow : false,
									options3d : {
										enabled : true, // 使用开始 3D 功能，
										alpha : 55,// 偏转角度 内旋转角度
										beta : 0
									//beta: 0,                // 外旋转角度
									//depth: 100,             // 图表的全深比，即为3D图X，Y轴的平面点固定，以图的Z轴原点为起始点上
									//groupZPadding: 1,      // z 轴间距，用于 3D 图形中的多个数据列间距

									/*  viewDistance: 100,      // 视图距离，它对于计算角度影响在柱图和散列图非常重要。此值不能用于3D的饼图
									 frame: {                // Frame框架，3D图包含柱的面板，我们以X ,Y，Z的坐标系来理解，X轴与 Z轴所形成
									                         // 的面为bottom，Y轴与Z轴所形成的面为side，X轴与Y轴所形成的面为back，bottom、
									                         // side、back的属性一样，其中size为感官理解的厚度，color为面板颜色
									     bottom: {
									         size: 1,
									         color: 'transparent'
									     },
									     side: {
									         size: 1,
									         color: 'transparent'
									     },
									     back: {
									         size: 1,
									         color: 'transparent'
									     }
									} */
									}
								},
								credits : {
									text : '',
									href : 'http://www.nimky.cn'
								},
								title : {
									text : ''
								},
								plotOptions : {
									pie : {
										innerSize : 85, //中心圆环大小
										depth : 60
									//厚度
									}
								},
								series : [
										{
											type : 'pie',
											name : '用电量',
											center : [ 310, 95 ],
											unit : 'kW‧h',
											size : 180,
											dataLabels : { //显示比例等
												enabled : true,
												format : '{point.name}{series.name}<br><span style="color:#FF8040">{point.y} </span>kW‧h <span style="color:#FF8040">（{point.percentage:.2f}%）</span>' //{point.percentage} 百分比 {point.y:.2f}数值
											},
											showInLegend : false, //下方的选择项 particular series type in the legend
											colors : [ '#f8bc05', '#a6cb09' ],//colors: ['#c23531', '#91c7ae'], //colors: ['#d51f1f', '#00365a'],
											data : echar1ElectricArr
										} ]
							};
							// 图表初始化函数 
							var chart = Highcharts.chart('echarDiv1',
									optiontotal);
						}
					})

    在一块DIV中显示两个饼图只需在series中新增以下代码即可

,{     type : 'pie',
	   name : '用水量',
	center : [ 850, 95 ],
	size : 180,
	tooltip : {
	    headerFormat : '<span style="font-size:12px">{series.name}:{point.y} 吨</span><br>',
		pointFormat : '<span style="color:{point.color}">{point.name}</span>: <b>{point.percentage:.2f}%</b> '
	          },
	dataLabels : {
		enabled : true,
		format : '{point.name}{series.name}<br><span style="color:#5A5AAD">{point.y} </span>吨 <span  style="color:#5A5AAD">（{point.percentage:.2f}%）</span>'
		},
	showInLegend : false,
	colors : [ '#0cb5ec', '#a6cb09' ],
	data : echar1WaterArr
}

3.tooltips的相关设置

   数据提示框指的当鼠标悬停在某点上时，以框的形式提示该点的数据，比如该点的值，数据单位等。

    （1）tooltips中的headerFormat和pointFormat为显示数据格式化，可以给显示的数据加上单位等信息。

tooltip : {  //显示结果为 用水量：123 吨
	    headerFormat : '<span style="font-size:12px">{series.name}:{point.y} 吨</span><br>',
		pointFormat : '<span style="color:{point.color}">{point.name}</span>: <b>{point.percentage:.2f}%</b> '
	          }
         

    （2）tooltips置于series中则表示为每一个饼图单独配置显示数据和单位等。

series : [
			{
			type : 'pie',
				name : '用电量',
				center : [ 310, 95 ],
				unit : 'kW‧h',
				size : 180,
				tooltip : {
				headerFormat : '<span style="font-size:12px">{series.name}:{point.y} kW‧h</span><br>',
				pointFormat : '<span style="color:{point.color}">{point.name}</span>: <b>{point.percentage:.2f}%</b> '
			},
				dataLabels : { //显示比例等
				enabled : true,
				format : '{point.name}{series.name}<br><span style="color:#FF8040">{point.y} </span>kW‧h <span style="color:#FF8040">（{point.percentage:.2f}%）</span>' //{point.percentage} 百分比 {point.y:.2f}数值
			    },
				showInLegend : false, //下方的选择项 particular series type in the legend
				colors : [ '#f8bc05', '#a6cb09' ],//colors: ['#c23531', '#91c7ae'], //colors: ['#d51f1f', '#00365a'],
				data : echar1ElectricArr
				},
				{
				type : 'pie',
				name : '用水量',
				center : [ 850, 95 ],
				size : 180,
				tooltip : {
				headerFormat : '<span style="font-size:12px">{series.name}:{point.y} 吨</span><br>',
				pointFormat : '<span style="color:{point.color}">{point.name}</span>: <b>{point.percentage:.2f}%</b> '
				},
				dataLabels : {
				enabled : true,
				format : '{point.name}{series.name}<br><span style="color:#5A5AAD">{point.y} </span>吨 <span  style="color:#5A5AAD">（{point.percentage:.2f}%）</span>'
				},
				showInLegend : false,
				colors : [ '#0cb5ec', '#a6cb09' ],
				data : echar1WaterArr
				}