Question

在Highcharts示例中，我看到车速表在针枢轴下方有一个数字指示器（http://jsfiddle.net/radi8/kbvC3/497/）。我将使用VU仪表，但想将此数字指示器添加到此仪表视图中。和小提琴（http://jsfiddle.net/radi8/Z2s77/1/）一起玩，我似乎无法显示这个元素。

有什么建议吗？

来自jsFiddle的我的VU

$(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'
    },

    pane: [{
        startAngle: -45,
        endAngle: 45,
        background: null,
        center: ['25%', '145%'],
        size: 300
    }, {
        startAngle: -45,
        endAngle: 45,
        background: null,
        center: ['75%', '145%'],
        size: 300
    }],                        

    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: 'OEE %<br/><span style="font-size:8px">Machine 001</span>',
            y: -40
        }
    }, {
        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: 'Cycle Eff %<br/><span style="font-size:8px">Machine 001</span>',
            y: -40
        }
    }],

    plotOptions: {
        gauge: {
            dataLabels: {
                enabled: false
            },
            dial: {
                radius: '100%'
            }
        }
    },
    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(leftVal,false);
        right.update(rightVal);//, false);
        chart.redraw();

    }, 1500);

    });
});

Answer 1

您必须启用和定位dataLabels（现在您有dataLabels：{enabled：false}）。

请参阅：http://api.highcharts.com/highcharts#plotOptions.gauge.dataLabels

使用VU Guage：在针下方添加数值

1 个答案: