Question

使用VU测量仪样品的一个有趣的小“怪癖”。当我尝试重新定位仪表板时，数字显示将消失。如果我保持位置＆lt; = 100％，显示屏将显示，任何＆gt; 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);

});
});

Answer 1

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

http://api.highcharts.com/highcharts#plotOptions.series.dataLabels.crop

Highcharts VU Meter Gauge数字显示消失

1 个答案: