highChart表图大全之饼图圆环图详解

一前言

最近在工作上，遇到了关于表图的需求，于是在任务完成之后在这里写篇博客记录一下

二基本饼图

代码：

<html>
<head>
<meta charset="UTF-8" />
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
</head>
<body>
<div id="container" style="width: 550px; height: 400px; margin: 0 auto"></div>
<script language="JavaScript">
$(document).ready(function() {  var chart = {type: 'pie',plotBackgroundColor: null,plotBorderWidth: null,plotShadow: false};var title = {text: '自信的人与不自信人的成功率',   style:{fontSize:"18px",fontWeight:"bold",color:"blue"}};      var tooltip = {pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'};var plotOptions = {pie: {allowPointSelect: true,cursor: 'pointer',dataLabels: {enabled: true,format: '<b>{point.name}</b>: {point.percentage:.1f} %',//point.name 该数据点名称，point.percentage：该数据点所占的百分比style: {color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'}}}};var series= [{name: 'Browser share',data: [{name: '自信',y: 90.0,sliced: true,selected: true},["不自信",10]]}];     var json = {};   json.chart = chart; json.title = title;     json.tooltip = tooltip;  json.series = series;json.plotOptions = plotOptions;$('#container').highcharts(json);
});
</script>
</body>
</html>

效果：

代码关键属性解析：
主要的关键字段有
char 表
tittle 标题
tooltip 提示工具（用来配置提示信息）
plotOptions 数据点的配置，（用来配置图表中的数据点相关属性）
series 数据列配置（用于设置图表中要展示数据相关的属性）
var chart中的type属性：用来规定该图表的类型，常用的其他类型还有‘column’柱形，split曲线型等

tittle: {//标题
text: 标题内容
style:{ 标题格式
fontSize:字体大小
fontWeight:字体粗细属性
color:字体颜色
}
tooltip //提示工具
pointFormat //当我们的数据滑到对应数据区域时的提示信息，内容支持html

plotOptions //设置图表数据点的相关配置信息
pie:{//配置饼图的数据点信息
allow Point Select：true //允许选中数据点,此处若设置为false，那么我们就不能通过点击鼠标来选中对应的数据区域
cursor:‘point’，//设置鼠标的形状
dataLabels:{//数据标签，如上图中区域图的分支

enabled://是否可见
format:提示内容，使用{}将属性筛选，若不加{}，poing.name就不能被识别为一个变量，会被识别为一个字符串：

style:{
color://数据标签的颜色
}
}

series 数据列配置（用于设置图表中要展示数据相关的属性）
series.name:数据序列的名称
data
data.name:数据点的名称
data.sliced:扇区的分离距离大小
data.selected//默认被选中

三圆环图

在实际工作中，可能会遇到需要使用圆环图的需求，如下：

其实很简单，我们只需要一步，就可以使实心圆环变成空心圆环
在数据点配置项：plot Point中加入innerSize关键字即可

  pie: {innerSize:'60%',allowPointSelect: true,cursor: 'pointer',dataLabels: {enabled: true,format: '{point.name}: {point.percentage:.1f} %',style: {color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'}}}};