Highcharts的餅圖默認提示框是個矩形方框，想要做成效果圖樣式需要對其進行自定義設(shè)置。在官網(wǎng)文檔中提到“當設(shè)置 useHTML 為 true 時，提示框可以支持 HTML 標簽，并最終以HTML 默認來渲染提示框?！?/p>
實現(xiàn)如圖自定義提示框的思路：
1.將默認提示框隱藏；
2.用自定義提示框圖做背景；
3.完善提示框中內(nèi)容。
效果圖：
找到提示框的class將其隱藏，對第一個span添加背景圖，并將第二個span隱藏即可實現(xiàn)效果圖中樣式。
代碼如下：
<!-- 引入 highcharts 文件 -->
<script src="http://cdn.highcharts.com.cn/highcharts/8.1.0/highcharts.js"></script>
<script src="http://cdn.hcharts.cn/highcharts/highcharts-3d.js"></script>
<body>
<div id="container" style="height:400px;"></div>
<script type="text/javascript">
var chart = Highcharts.chart('container', {
//圖表配置 3D圖表
chart: {
type: 'pie',
options3d: {
enabled: true,
alpha: 60,
beta: 0,
},
},
credits: {
enabled: false //去除圖表右下角版權(quán)信息
},
legend: {
floating: true,
x: 140,
y: -320,
squareSymbol: false, //默認圖例標志長寬相等
symbolHeight: 8,
symbolWidth: 20,
symbolRadius: 0,
itemStyle: {
lineHeight: '12px',
fontSize: '12px',
letterSpacing: 0,
fontWeight: 'lighter'
}
},
title: {
text: ''
},
plotOptions: {
pie: {
allowPointSelect: true,
depth: 40,
dataLabels: {
enabled: false,
},
showInLegend: true, //顯示圖例,
startAngle: 133,
}
},
series: [{
type: 'pie',
name: '學(xué)校男女生人數(shù)分布',
size: '150%', //餅圖大小
data: [{
name: '男生',
y: 28,
color: '#2BD5D5'
},
{
name: '女生',
y: 72,
color: '#ffccff'
},
],
}],
tooltip: {
useHTML: true, //使用HTML渲染提示框
style: { //提示框內(nèi)容樣式
color: '#0000ff',
fontSize: '14px'
},
pointFormat: '{point.percentage:.1f}%'
}
})
</script>
</body>
<style>
/* 提示框自定義 */
.highcharts-label.highcharts-tooltip.highcharts-color-0 {
opacity: 0;
/* 原提示框隱藏 */
}
.highcharts-label.highcharts-tooltip.highcharts-color-1 {
opacity: 0;
}
/* 提示框自定義圖片做背景 */
.highcharts-label.highcharts-tooltip.highcharts-color-0>span {
width: 80px;
height: 60px;
line-height: 16px;
text-align: center;
background: url('img/tips.png') no-repeat;
background-size: 100%;
}
.highcharts-label.highcharts-tooltip.highcharts-color-1>span {
width: 80px;
height: 60px;
line-height: 16px;
text-align: center;
background: url('img/tips.png') no-repeat;
background-size: 100%;
}
.highcharts-label.highcharts-tooltip.highcharts-color-0 span span {
display: none;
}
.highcharts-label.highcharts-tooltip.highcharts-color-1 span span {
display: none;
}
</style>
好記性不如爛筆頭，總結(jié)和記錄工作學(xué)習(xí)中的點點滴滴，如有不對之處還請指教。
