HighCharts - 删除条形图的填充

时间:2013-02-11 11:16:29

标签: css highcharts

我正在使用条形图(使用百分比堆叠)构建一个进度条,并希望删除容器中的空格/填充,并且只保留条形容器中没有任何填充/边距空格的条。

有没有办法实现这个目标?

Fiddle

代码:

$(function () {
    var chart;
    $(document).ready(function () {
        chart = new Highcharts.Chart({
            chart: {
                renderTo: 'container',
                type: 'bar'
            },
            legend: {
                enabled: false,
            },
            title: {
                text: ''
            },
            xAxis: {

                lineWidth: 0,

                labels: {
                    enabled: false
                },
                minorTickLength: 0,
                tickLength: 0
            },
            yAxis: {
                min: 0,
                title: {
                    text: ''
                },
                lineWidth: 0,
                gridLineWidth:0,
                lineColor: 'transparent',
                labels: {
                    enabled: false
                },
                minorTickLength: 0,
                tickLength: 0
            },
            tooltip: {
                enabled: false
            },
            plotOptions: {
                bar: {
                    stacking: 'percent'

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

            series: [{
                name: 'max',
                data: [40],
                color: 'white'
            }, {
                name: 'current',
                data: [60],
                color: 'green'
            }]
        });
    });

});

1 个答案:

答案 0 :(得分:6)

您可以简单地删除边距:

chart: {
    renderTo: 'container',
    ....
    margin: 0
}

请参阅:http://jsfiddle.net/gRYGn/4/