一 前言
最近在工作上，遇到了关于表图的需求，于是在任务完成之后在这里写篇博客记录一下
二 基本饼图
代码：
<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'
}
}
}
};
