在 Angular Gauge Highchart 中显示类别并删除数字

Question

我想在 Highchart 的 Angular 仪表中实现类别并删除数字，如 here. What I have done so far is this 所示。

$(function () {

$('#container').highcharts({

    chart: {
        type: 'gauge',
        plotBackgroundColor: null,
        plotBackgroundImage: null,
        plotBorderWidth: 0,
        plotShadow: false
    },

    title: {
        text: null
    },

    pane: {
        startAngle: -150,
        endAngle: 150,
        background: [{
            backgroundColor: {
                linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
                stops: [
                    [0, '#FFF'],
                    [1, '#333']
                ]
            },
            borderWidth: 0,
            outerRadius: '109%'
        }, {
            backgroundColor: {
                linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
                stops: [
                    [0, '#333'],
                    [1, '#FFF']
                ]
            },
            borderWidth: 1,
            outerRadius: '107%'
        }, {
            // default background
        }, {
            backgroundColor: '#DDD',
            borderWidth: 0,
            outerRadius: '105%',
            innerRadius: '103%'
        }]
    },

    // the value axis
    yAxis: {
        min: 0,
        max: 100,
        type:'category',
        categories:['One','Two','Three','Four','Five'],
        tickPixelInterval: 30,
        tickWidth: 2,
        tickPosition: 'outside',
        tickLength: 20,
        tickColor: '#666',

        title: {
            text: null
        },
        plotBands: [{
            from: 0,
            to: 60,
            color: '#55BF3B' // green
        }, {
            from: 60,
            to: 80,
            color: '#DDDF0D' // yellow
        }, {
            from: 80,
            to: 100,
            color: '#DF5353' // red
        }]
    },

    series: [{
        name: 'Speed',
        data: [80]
    }]

});

});

我不想要图表中的任何数字，如您在所附屏幕截图中所见。任何帮助表示赞赏。谢谢

Answer 1

你有蜂巢值（80），而只有5个类别。规范化值以获得所需的结果：http://jsfiddle.net/buaqgvq2/1

$('#container').highcharts({

    chart: {
        type: 'gauge'
    },

    pane: {
        startAngle: -150,
        endAngle: 150
    },

    // the value axis
    yAxis: {
        min: 0,
        max: 4,
        type:'category',
                    categories:['One','Two','Three','Four','Five'],
        tickPixelInterval: 30,
        tickWidth: 2,
        tickPosition: 'outside',
        tickLength: 20,
        tickColor: '#666',

        title: {
            text: null
        },
        plotBands: [{
            from: 0,
            to: 2,
            color: '#55BF3B' // green
        }, {
            from: 2,
            to: 3,
            color: '#DDDF0D' // yellow
        }, {
            from: 3,
            to: 4,
            color: '#DF5353' // red
        }]
    },

    series: [{
        name: 'Speed',
        data: [3.4]
    }]

});

在 Angular Gauge Highchart 中显示类别并删除数字

Show categories and remove numbers in Angular Gauge Highchart

javascript

highcharts

google-visualization

gauge