javascript - 如何去除车速表上的刻度标签和工具提示标签？

Question

我想删除车速表上的刻度标签和工具提示标签？我设法删除 0 到 200 之间的标签，但我想要的是速度计上没有标签，甚至速度计中间的框字段也是如此。请帮忙。 TQ。

下面是我的代码。

$(function () {

    $('#container').highcharts({

        chart: {
            type: 'gauge',
            plotShadow: false
        },

        title: {
            text: ''
        },

        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: '50%',
                innerRadius: '48%'
            }]
        },

        // the value axis
        yAxis: {
            min: 0,
            max: 200,

            
            title: {
                text: ''
            },
            plotBands: [{
                from: 0,
                to: 120,
                color: '#55BF3B' // green
            }, {
                from: 120,
                to: 160,
                color: '#DDDF0D' // yellow
            }, {
                from: 160,
                to: 200,
                color: '#DF5353' // red
            }]
        },

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

    },
    // Add some life
    function (chart) {
        
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/highcharts-more.js"></script>

<div id="container" style="min-width: 20px; max-width: 100px; height: 100px; margin: 0 auto"></div>

Answer 1

你可以:

• 添加 credits: {enabled: false } 以删除“Highcharts.com”
• 添加 yAxis: { labels: {enabled: false } } 以删除刻度标签
• 添加 tooltip: {enabled: false } 以删除工具提示

编辑:同时将 dataLabels:{enabled: false } 添加到您的系列中以隐藏“80”标签

http://api.highcharts.com/highcharts

$(function () {

    $('#container').highcharts({

        chart: {
            type: 'gauge',
            plotShadow: false
        },

        title: {
            text: ''
        },

        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: '50%',
                innerRadius: '48%'
            }]
        },
        // the value axis
        yAxis: {
            min: 0,
            max: 200,
            labels: { enabled: false },
            title: {
                text: ''
            },
            plotBands: [{
                from: 0,
                to: 120,
                color: '#55BF3B' // green
            }, {
                from: 120,
                to: 160,
                color: '#DDDF0D' // yellow
            }, {
                from: 160,
                to: 200,
                color: '#DF5353' // red
            }]
        },
        series: [{
            name: '',
            data: [80],
            dataLabels:{ enabled: false },
        }],
        tooltip: {enabled: false },
        credits: { enabled: false }
    },
    // Add some life
    function (chart) {
        
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/highcharts-more.js"></script>

<div id="container" style="min-width: 20px; max-width: 100px; height: 100px; margin: 0 auto"></div>