Highcharts自定义提示框样式
2020-05-22 本文已影响0人
Lily_FJ
Highcharts的饼图默认提示框是个矩形方框，想要做成效果图样式需要对其进行自定义设置。在官网文档中提到“当设置 useHTML 为 true 时，提示框可以支持 HTML 标签，并最终以HTML 默认来渲染提示框。”
实现如图自定义提示框的思路：
1.将默认提示框隐藏；
2.用自定义提示框图做背景；
3.完善提示框中内容。
效果图：
找到提示框的class将其隐藏，对第一个span添加背景图，并将第二个span隐藏即可实现效果图中样式。
代码如下：
<!-- 引入 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 //去除图表右下角版权信息
},
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: '学校男女生人数分布',
size: '150%', //饼图大小
data: [{
name: '男生',
y: 28,
color: '#2BD5D5'
},
{
name: '女生',
y: 72,
color: '#ffccff'
},
],
}],
tooltip: {
useHTML: true, //使用HTML渲染提示框
style: { //提示框内容样式
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>
好记性不如烂笔头，总结和记录工作学习中的点点滴滴，如有不对之处还请指教。
