极客观点
项目管理
HarmonyOS
这是官网上的代码，我在上面加了个legend，可以完整显示。
这是我复制复制上面代码，可是这个图例位置完全跑偏，用了useHTML和labelFormatter,图例就完全跑了，这两个属性在饼图中冲突吗？怎么回事？
最后贴我的代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="https://cdn.bootcss.com/jquery/1.12.0/jquery.js"></script>
<script src="highcharts.src.js"></script>
</head>
<body>
<div id="container"></div>
</body>
<script>
$(function () {
$('#container').highcharts({
chart: {
type:'pie',
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false
},
title: {
text: '2014 某网站上各个浏览器的访问量占比'
},
tooltip: {
headerFormat: '{series.name}<br>',
pointFormat: '{point.name}: <b>{point.percentage:.1f}%</b>'
},
legend:{
useHTML:true,
labelFormatter: function () {
return '' +
'<div class="legend" style="top: -15px;position: relative;font-size: 14px;">' + this.name + ' ' +
' <span style="font-size: 28px;display: inline-block;position: relative;top: 5px;">' +
this.y + '</span>' +
' 台</div>';
}
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: false
},
showInLegend: true
}
},
series: [{
name: '浏览器访问量占比',
data: [
['Firefox', 45.0],
['IE', 26.8],
{
name: 'Chrome',
y: 12.8,
sliced: true,
selected: true
},
['Safari', 8.5],
['Opera', 6.2],
['其他', 0.7]
]
}]
});
});
</script>
</html>
我用的highchart版本是6.0.1，更新到6.0.2之后bug解决。估计是6.0.1的bug,可能是legend同时用了useHTML和labelFormatter的时候，最外层的.highchart-legend定位的时候没有计算好left，和top值，都为0，才会出现在左上角。