Highcharts 高度计仪表数字显示不显示

一个有趣的小“怪癖”使用了VU量表的样本。当我尝试重新定位仪表窗格时，数字显示将消失。如果我保持100%的位置，数字显示消失

我曾多次尝试将显示器重新放置在可以看到的位置，但没有成功。有什么想法吗？以下是最新的测试小提琴：

调整元素很容易，使用窗格：部分移动整个仪表和显示窗格，使用datalabel:部分移动数字显示

$(function () {
var chart = new Highcharts.Chart({
    chart: {
        renderTo: 'container',
        type: 'gauge',
        plotBorderWidth: 1,
        plotBackgroundColor: {
            linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
            stops: [
                [0, '#FFF4C6'],
                [0.3, '#FFFFFF'],
                [1, '#FFF4C6']
            ]
        },
        plotBackgroundImage: null,
        height: 200
    },

    title: {
        text: 'Efficiencies'
    },
    /***
       in order to move the gauge up or down in the pane, adjust the 'Y' element in
       the center array. Adjusting this above 100% (to move the gauge DOWN) 
       will cause the numeric display to disappear
    ***/
    pane: [{
        startAngle: -45,
        endAngle: 45,
        background: null,
        center: ['25%', '100%'],
        size: 200
    }, {
        startAngle: -45,
        endAngle: 45,
        background: null,
        center: ['75%', '105%'],
        size: 200
    }],                        

    yAxis: [{
        min: 0,
        max: 110,
        minorTickPosition: 'outside',
        tickPosition: 'outside',
        labels: {
            rotation: 'auto',
            distance: 20
        },
        plotBands: [{
            from: 0,
            to: 70,
            color: '#DF5353', // red
            innerRadius: '100%',
            outerRadius: '105%'
         }, {
            from: 70,
            to: 95,
             color: '#DDDF0D', // yellow
            innerRadius: '100%',
            outerRadius: '105%'
        }, {
            from: 95,
            to: 110,
            color: '#55BF3B', // green
            innerRadius: '100%',
            outerRadius: '105%'
        }],
        pane: 0,
        title: {
            text: '<span style="font-size:10px">OEE %</span><br/><span style="font-size:8px">Machine 001</span>',
            y: -30
        }
    }, {
        min: 0,
        max: 110,
        minorTickPosition: 'outside',
        tickPosition: 'outside',
        labels: {
            rotation: 'auto',
            distance: 20
        },
        plotBands: [{
            from: 0,
            to: 70,
            color: '#DF5353', // red
            innerRadius: '100%',
            outerRadius: '105%'
         }, {
            from: 70,
            to: 95,
             color: '#DDDF0D', // yellow
            innerRadius: '100%',
            outerRadius: '105%'
        }, {
            from: 95,
            to: 110,
            color: '#55BF3B', // green
            innerRadius: '100%',
            outerRadius: '105%'
        }],
        pane: 1,
        title: {
            text: '<span style="font-size:10px">Cycle Eff %</span><br/><span style="font-size:8px">Machine 001</span>',
            y: -30
        }
    }],

    plotOptions: {
        gauge: {
            /***
               Adjusting the position of the numeric display is also easy
               Change the y: component more negative move the display UP, 
               decreasing the value move the display DOWN
            ***/
            dataLabels: {
                enabled: true,
                x: 0,
                y: -120
            },
            dial: {
                radius: '110%'
            }
        }
    },
    series: [{
        data: [80],
        yAxis: 0
    }, {
        data: [80],
        yAxis: 1
    }]

},

// Let the music play
function(chart) {
    setInterval(function() {
        var left = chart.series[0].points[0],
            right = chart.series[1].points[0],
            leftVal, 
            //inc = (Math.random() - 0.5) * 30;
            inc1 = Math.random() * (30) + 70;
            inc2 = Math.random() * (30) + 70;

        leftVal =  left.y + inc1;
        rightVal = right.y + inc2; // / 3;
        if (leftVal < 0 || leftVal > 110) {
            //leftVal = left.y - inc;
            leftVal = 110 - inc1;
        }
        if (rightVal < 0 || rightVal > 110) {
            rightVal = 110 - inc2;
        }

        left.update(parseInt(leftVal),false);
        right.update(parseInt(rightVal), false);//, false);
        chart.redraw();

    }, 1500);

});
});

$（函数（）{
var图表=新的Highcharts.图表({
图表：{
renderTo:'容器'，
类型：“仪表”，
打印边框宽度：1，
绘图背景颜色：{
线性半径：{x1:0，y1:0，x2:0，y2:1}，
停止：[
[0，#FFF4C6']，
[0.3，#FFFFFF']，
[1'#FFF4C6']
]
},
plotBackgroundImage:空，
身高：200
},
标题：{
文本：“效率”
},
/***
要在窗格中向上或向下移动仪表，请在中调整“Y”元素
中心阵列。将其调整到100%以上（以向下移动仪表）
将导致数字显示消失
***/
窗格：[{
startAngle:-45，
端角：45，
背景：空，
中心：['25%，'100%，]，
尺码：200
}, {
startAngle:-45，
端角：45，
背景：空，
中心：['75%，'105%']，
尺码：200
}],                        
亚克斯：[{
分:0,，
最高：110，
minorTickPosition:“外部”，
位置：'外部'，
标签：{
旋转：“自动”，
距离：20
},
绘图带：[{
起:0,，
致:70,，
颜色：'#DF5353'，//红色
内半径：“100%”，
外层：105%
}, {
起:70,，
致:95,，
颜色：'#DDDF0D'，//黄色
内半径：“100%”，
外层：105%
}, {
起:95,，
致：110，
颜色：'#55BF3B'，//绿色
内半径：“100%”，
外层：105%
}],
窗格：0，
标题：{
文本：“OEE%
机器001”，
y:-30
}
}, {
分:0,，
最高：110，
minorTickPosition:“外部”，
位置：'外部'，
标签：{
旋转：“自动”，
距离：20
},
绘图带：[{
起:0,，
致:70,，
颜色：'#DF5353'，//红色
内半径：“100%”，
外层：105%
}, {
起:70,，
致:95,，
颜色：'#DDDF0D'，//黄色
内半径：“100%”，
外层：105%
}, {
起:95,，
致：110，
颜色：'#55BF3B'，//绿色
内半径：“100%”，
外层：105%
}],
窗格：1，
标题：{
文本：“循环效率%
机器001”，
y:-30
}
}],
打印选项：{
仪表：{
/***
调整数字显示器的位置也很容易
将y:分量更改为负数将显示屏向上移动，
减小该值将向下移动显示器
***/
数据标签：{
启用：对，
x:0,，
y:-120
},
拨号：{
半径：“110%”
}
}
},
系列：[{
数据：[80]，
雅克斯：0
}, {
数据：[80]，
亚克斯：1
}]
},
//让音乐播放
功能（图表）{
setInterval（函数（）{
var left=图表。系列[0]。点[0]，
右=图表。系列[1]。点[0]，
leftVal，
//inc=（数学随机数（）-0.5）*30；
inc1=Math.random（）*（30）+70；
inc2=Math.random（）*（30）+70；
leftVal=left.y+inc1；
rightVal=right.y+inc2；///3；
if（leftVal<0 | | leftVal>110）{
//leftVal=left.y-inc；
leftVal=110-inc1；
}
如果（rightVal<0 | | rightVal>110）{
rightVal=110-inc2；
}
update（parseInt（leftVal），false）；
右。更新（parseInt（rightVal），false）；/，false）；
chart.redraw（）；
}, 1500);
});
});

如果使用dataLabels.crop=false选项，它将显示出来。但是根据API描述，如果数据标签也在绘图区域之外，它也会显示出来，这可能是您不想要的。highcharts的行为很奇怪，因为它在隐藏标签时查看序列是否在绘图区域之外，而不是datalabel所在的位置，所以我同意这是一个bug

---

跟踪器上报告的问题，请参阅：