如何删除车速表上的刻度标签和工具提示标签?

时间:2016-03-29 09:32:11

标签: javascript highcharts

我想在车速表上删除刻度标签和工具提示的标签?我设法删除0到200之间的标签,但我想要的是没有标签是车速表上的标签,甚至是车速表中间的箱子区域。请帮忙。 TQ

以下是我的代码。



<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>
&#13;
Configure::write('debug', 2);
&#13;
&#13;
&#13;

1 个答案:

答案 0 :(得分:2)

你可以:

  • 添加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>