避免刻度线长度与Highchart规中的标签重叠

时间:2018-07-25 14:05:14

标签: highcharts

如果我增加HighChart的量表中的刻度线长度,它将与窗格标签重叠。我需要避免这种重叠。

下面是我的Highcharts代码:

Highcharts.chart('container', {   
yAxis: {
    min: 0,
    max: 200,               
    minorTickInterval: 'auto',
    minorTickWidth: 1,
    minorTickLength: 15,
    minorTickPosition: 'inside',
    minorTickColor: '#666',

    tickPixelInterval: 30,
    tickWidth: 2,
    tickPosition: 'inside',
    tickLength: 20,
    tickColor: '#666',
    labels: {
        step: 2,
        rotation: 'auto'
    },
    title: {
        text: 'km/h'
    },
    plotBands: [{
        from: 0,
        to: 120,            
        thickness: '15%',
        color: '#55BF3B' // green
    }, {
        from: 120,
        to: 160,
        color: '#DDDF0D' // yellow
    }, {
        from: 160,
        to: 200,
        color: '#DF5353' // red
    }]
},

series: [{
    name: 'Speed',
    data: [80],
    tooltip: {
        valueSuffix: ' km/h'
    }
}]

});

图表看起来像这样enter image description here

这是我的fiddle

1 个答案:

答案 0 :(得分:2)

如果需要避免刻度线与速度计的速度重叠,可以将标签类别中的distance更改为压力计的周长。其标准为-25,将其设置为-30似乎可以解决您的问题:

 labels: {
        step: 2,
        rotation: 'auto',
        distance: -30
    },

JSFiddle

有关更多信息,请参见Highcharts API