在Highcharts上删除Y轴GridLines

时间:2014-10-23 12:53:07

标签: javascript highcharts

是否可以删除除最外面一行以外的所有y轴网格线?

例如,在这个jsfiddle(http://jsfiddle.net/abyrne85/g7vpq8ce/1/)中,我试图删除所有行(x轴和y轴),当然只留下最外面的行和数据行。

   $(function () {

    $('#container').highcharts({

        chart: {
            polar: true,
            type: 'line'
        },

        title: {
            text: null,
            x: -80
        },

        xAxis: {
            categories: ['Sales', 'Marketing', 'Development',                 'Customer Support','Information Technology'],
            tickmarkPlacement: 'on',
            lineWidth: 0
        },

        yAxis: {
            gridLineInterpolation: 'polygon',
            lineWidth: 0,
            min: 0
        },

        legend: {
            enabled:false
        },

        series: [{      
            data: [5, 3, 4, 3, 2],
            pointPlacement: 'on'
        }]
    });
});

2 个答案:

答案 0 :(得分:1)

1。将xAxis的gridLineWidth设置为0以将其删除。

2。设置yAx的tickInterval大于数据数组中的最大值,因此它将是唯一的网格线。

$(function () {
    var myData = [5, 3, 4, 3, 2],
        tickIntr = Math.max.apply(null, myData) + 1; //this is to set 
        //the tickInterval larger than the maximum value in data array

    $('#container').highcharts({
        chart: {
            polar: true,
            type: 'line',
        },

        title: {
            text: null,
            x: -80
        },

        xAxis: {
            categories: ['Sales', 'Marketing', 'Development', 
                         'Customer Support','Information Technology'],
            tickmarkPlacement: 'on',
            lineWidth: 0,
            gridLineWidth: 0 //Remove xAxis lines
        },

        yAxis: {
            gridLineInterpolation: 'polygon',
            lineWidth: 0,
            min: 0,
            tickInterval: tickIntr //set yAxis tickInterval
        },

        legend: {
            enabled:false
        },

        series: [{      
            data: myData,
            pointPlacement: 'on'
        }]
    });
});

http://jsfiddle.net/g7vpq8ce/2/

答案 1 :(得分:1)

或使用tickPositioner,请参阅示例:http://jsfiddle.net/g7vpq8ce/3/

    yAxis: {
        gridLineInterpolation: 'polygon',
        lineWidth: 0,
        min: 0,
        tickPositioner: function(min, max){
            return [min, max];
        }
    },