# 官方文档入口
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
}