如何解决高图 |如何避免标签内的饼图重叠
我正在使用 highcharts PIE,并想在切片上放置标签。但是,由于较小的值与相邻的较大值重叠。我已将“allowOverlap”属性设置为 false,这很有效,直到图表更新,例如悬停事件。
因此:
pie.series.dataLabel.allowOverlap=false
不会在更新之间持续存在。有没有办法处理这种情况?
参考文献:
- 内部标签 - https://api.highcharts.com/highcharts/series.column.dataLabels.inside。
- allowOverlap= false https://api.highcharts.com/highcharts/plotOptions.series.dataLabels.allowOverlap
解决方法
Pie 的系列类型没有 dataLabels.inside,请使用 dataLabels.distance 代替。 dataLabels.allowOverlap 没有记录在 pie 中。这可能解释了意外行为。
您似乎遇到了错误,我建议您提交错误报告 here。
禁用鼠标跟踪,可能是一个临时解决方案。
Highcharts.chart('container',{
chart: {
plotBackgroundColor: null,plotBorderWidth: null,plotShadow: false,type: 'pie',},title: {
text: 'Browser market shares in January,2018'
},tooltip: {
pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
},accessibility: {
point: {
valueSuffix: '%'
}
},plotOptions: {
pie: {
allowPointSelect: true,cursor: 'pointer',dataLabels: {
enabled: true,distance: -30,allowOverlap: false,format: '<b>{point.name}</b>: {point.percentage:.1f} %',enableMouseTracking: false,}
},series: [{
name: 'Brands',colorByPoint: true,dataLabels:{ allowOverlap: false},data: [{
name: 'Chrome',y: 61.41,sliced: true,selected: true,{
name: 'Internet Explorer',y: 11.84
},{
name: 'Firefox',y: 10.85
},{
name: 'Edge',y: 4.67
},{
name: 'Safari',y: 4.18
},{
name: 'Sogou Explorer',y: 1.64
},{
name: 'Opera',y: 1.6
},{
name: 'QQ',y: 1.2
},{
name: 'Other',y: 2.61
}]
}]
});
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>
<script src="https://code.highcharts.com/modules/accessibility.js"></script>
<figure class="highcharts-figure">
<div id="container"></div>
<p class="highcharts-description">
Pie charts are very popular for showing a compact overview of a
composition or comparison. While they can be harder to read than
column charts,they remain a popular choice for small datasets.
</p>
</figure>
<script src="index.js"></script>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。