减少高图中列之间的间距

时间:2014-10-01 06:32:41

标签: highcharts

我需要减少红色列之间的空间。请参阅this code

$(function () {
$('#container').highcharts({

    colors: ['#ba0000'],
    chart: {
        type: 'column',
        spacingBottom: 10,
        spacingTop: 30,
        spacingLeft: 0,
        spacingRight: 10,

        style: {
            fontFamily: 'MuseoSans-500',
            fontSize: '14px'                
        }       

    },

    title: {
        text: ''
    },
    subtitle: {
        text: ''
    },
    xAxis: {
        categories: [
            'YTD',
            'QTD',
            'Last Period'
        ],
        labels: {
            style: {
                fontSize:'14px'
            }
        }           
    },
    yAxis: {
        min: 0,
        title: {
            text: '%'
        },

        plotLines: [{
            color: '#0054a6',
            width: 2,
            value: 48,
            dashStyle: 'Dash',
        label : {
                    text : 'AVG'
                }               
        },



        {
            color: '#00ed99',
            width: 2,
            value: 65,
            dashStyle: 'Dash',
            label : {
                    text : 'GOAL',

             }  


            }]

    },



    credits: {
         enabled: false
    },
    tooltip: {
        headerFormat: '<span style="font-size:1.1em">{point.key}</span><table>',
        pointFormat: '<tr><td style="color:{series.color};padding:0"></td>' +
            '<td style="padding:0"><b>{point.y:.1f}%</b></td></tr>',
        footerFormat: '</table>',
        shared: true,
        useHTML: true
    },
    plotOptions: {
        column: {

            pointPadding: 0,
            borderWidth: 0,
            groupPadding: 0,
            pointWidth: 50,
        }
    },
    series: [{
        data: [57, 63, 62],


    }]
});

});

我尝试过来自Highcharts - How can I decrease space between categories?Space between columns的解决方案,但它并没有奏效。我不太确定我错过了什么。

感谢。

1 个答案:

答案 0 :(得分:7)

您需要财产groupPadding

        plotOptions: {
            series: {
                pointPadding: 0,
                groupPadding: 0,
            }
        },

这将完全消除它们之间的间距。

<强> See the DEMO here