一 前言
最近在工作上，遇到了關於表圖的需求，於是在任務完成之後在這裏寫篇博客記錄一下
二 基本餅圖
代碼：
<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'
}
}
}
};
