Question

我正在绘制一个半圆形饼图（使用innersize和start- / endAngle）。但我的数据标签位于绘图区域之外（中心点/ xAxis下方）或根本没有显示我的设置。

$(function () {
    var chart;
    $(document).ready(function() {
        chart = new Highcharts.Chart({
            chart: {
                renderTo: 'container',
                plotBackgroundColor: null,
                plotBorderWidth: null,
                plotShadow: false
            },
            title: {
                text: '',
                enabled: false
            },
            tooltip: {
                pointFormat: '{series.name}: <b>{point.percentage}%</b>',
                percentageDecimals: 1
            },
            plotOptions: {
                pie: {
                    startAngle: -90,
                    endAngle: 90,
                    center: ['50%', '100%'],
                    size: '140%',
                    cursor: 'pointer',
                    dataLabels: {
                        enabled: true,
                        //crop: false,
                        //overflow: 'none',
                        //useHTML: true,
                        formatter: function() {
                            return '<b>'+ this.point.name +'</b>: '+ this.percentage +' %';
                        },
                        style: {
                            width: '100px' // for line wrap on long dataLabels
                        }
                    }
                }
            },
  series: [{
            type: 'pie',
            name: 'Browser share',
            data: [
                ['Firefox and this is very very very long name with some spaces etc.',   45.0],
                ['IE',       26.8],
                {
                    name: 'Chrome',
                    y: 12.8,
                    sliced: true,
                    selected: true
                },
                ['Safari',    8.5],
                ['Opera',     6.2],
                ['Others',   0.7]
            ]
        }]
        });
    });

});

见这里：jsfiddle

使用useHTML：true, useHTML: true根本不起作用。

使用useHTML: true会在绘图中渲染溢出的dataLabels，但是我的long dataLabels消失了。

那么如何在考虑以下事项的情况下实现这一目标呢？

我的半甜甜圈应始终位于我的情节区域的底部并使用空间（不要太小）。
碰巧我有很长的数据标签所以定义一个style.width似乎在需要的时候进行换行。
DataLabel应始终高于xAxis，不得低于我的半甜甜圈的底部。
应始终使用连接器显示DataLabel并将其置于图表之外。

提前致谢并致以最诚挚的问候。

Answer 1

看起来可能是bug，在此处报告：https://github.com/highslide-software/highcharts.com/issues/2630

Highcharts中的DataLabel位于容器外部/未显示

1 个答案: