如何将边距重置为 0 并将自定义边距应用于高图表上的 x 个类别条.js.

Question

我一直在尝试更改水平条上的边距，但没有运气，有没有办法？ 如果是这样，可以设置一个规则：底部边距：20px到全部，然后下边距：40px到只有元素2,4,6和8？我创建了一个 http://jsfiddle.net/creativestudio/KrTbz/6/

这是我的代码：

        function smileys() {

            var chart;
            $(function () { 
                chart = new Highcharts.Chart({ 
                    chart: {
                        renderTo: 'smileys',
                        type: 'bar',
                        backgroundColor: 'transparent',
                    },
                    title: { text: null },
                    subtitle: { text: null },
                    xAxis: {
                        tickLength: 0,
                        lineWidth: 0,
                        categories: ['Awesome','Awesome Previous', 'Good', 'Good Previous', 'Okay', 'Okay Previous', 'Awful', 'Awfull Previous'],
                        title: {
                            text: null
                        },
                        labels: {
                            enabled: true,
                            color: '#fff',
                            x: 5,
                            y: 0,
                            useHTML: true,
                            formatter: function () {
                                console.log(this);
                                return {
                                    'Awesome': '<i class="smile-awesome" style="font-size:.75em" type="icon"></i>',
                                    'Good': '<i class="smile-good" style="font-size:.75em" type="icon"></i>',
                                    'Okay': '<i class="smile-okay" style="font-size:.75em" type="icon"></i>',
                                    'Awful': '<i class="smile-yuck" style="font-size:.75em" type="icon"></i>',
                                }[this.value];
                            }
                        }
                    },
                    yAxis: {
            max: 100,
            min: 0,
            gridLineWidth: 0,
            title: {
                text: null
            },
            labels: {
                enabled: false,
            }
        },
                    tooltip: {
                        enabled: false
                    },
                    plotOptions: {
                        bar: {
                            dataLabels: {
                                enabled: true, 
                                color: '#f60'
                            }
                        }
                    },
                    legend: { enabled: false },
                    credits: { enabled: false },
                    plotOptions: { 
                        series: {
        //                  type: 'bar',
                            borderWidth: 0,
                            borderRadius: 3,
                            pointWidth: 20,
                            shadow: false
                            }
                        },
                    series: [{
                            data: [{
                                name: 'Awesome',
                                y: 88,
                                color: {
                        linearGradient: {
                            x1: 0, 
                            y1: 0, 
                            x2: 1, 
                            y2: 0
                        },
                        stops: [
                            [0, 'rgb(66, 121, 54)'],
                            [.50, 'rgb(86, 146, 71)'],
                            [.50, 'rgb(97, 159, 79)'],
                            [1, 'rgb(120, 182, 98)']]}
                            }, {
                                name: 'Awesome Previous',
                                y: 85,
                                color: {
                        linearGradient: {
                            x1: 0, 
                            y1: 0, 
                            x2: 1, 
                            y2: 0
                        },
                        stops: [
                            [0, 'rgb(62, 131, 161)'],
                            [.50, 'rgb(45, 94, 119)'],
                            [.50, 'rgb(51, 107, 134)'],
                            [1, 'rgb(34, 72, 91)']]}
                            }, {
                                name: 'Good',
                                y: 75,
                                color: {
                        linearGradient: {
                            x1: 0, 
                            y1: 0, 
                            x2: 1, 
                            y2: 0
                        },
                        stops: [
                            [0, 'rgb(167, 195, 100)'],
                            [.50, 'rgb(183, 206, 128)'],
                            [.50, 'rgb(192, 213, 145)'],
                            [1, 'rgb(207, 223, 170)']]}
                            }, {
                                name: 'Good Previous',
                                y: 50,
                                color: {
                        linearGradient: {
                            x1: 0, 
                            y1: 0, 
                            x2: 1, 
                            y2: 0
                        },
                        stops: [
                            [0, 'rgb(62, 131, 161)'],
                            [.50, 'rgb(45, 94, 119)'],
                            [.50, 'rgb(51, 107, 134)'],
                            [1, 'rgb(34, 72, 91)']]}
                            }, {
                                name: 'Okay',
                                y: 95,
                                color: {
                        linearGradient: {
                            x1: 0, 
                            y1: 0, 
                            x2: 1, 
                            y2: 0
                        },
                        stops: [
                            [0, 'rgb(211, 127, 39)'],
                            [.50, 'rgb(220, 151, 52)'],
                            [.50, 'rgb(224, 163, 57)'],
                            [1, 'rgb(232, 186, 72)']]}
                            }, {
                                name: 'Okay Previous',
                                y: 85,
                                color: {
                        linearGradient: {
                            x1: 0, 
                            y1: 0, 
                            x2: 1, 
                            y2: 0
                        },
                        stops: [
                            [0, 'rgb(62, 131, 161)'],
                            [.50, 'rgb(45, 94, 119)'],
                            [.50, 'rgb(51, 107, 134)'],
                            [1, 'rgb(34, 72, 91)']]}
                            }, {
                                name: 'Awful',
                                y: 68,
                                color: {
                        linearGradient: {
                            x1: 0, 
                            y1: 0, 
                            x2: 1, 
                            y2: 0
                        },
                        stops: [
                            [0, 'rgb(190, 63, 36)'],
                            [.50, 'rgb(203, 83, 48)'],
                            [.50, 'rgb(208, 94, 53)'],
                            [1, 'rgb(220, 116, 66)']]}
                            }, {
                                name: 'Awful Previous',
                                y: 88,
                                color: {
                        linearGradient: {
                            x1: 0, 
                            y1: 0, 
                            x2: 1, 
                            y2: 0
                        },
                        stops: [
                            [0, 'rgb(62, 131, 161)'],
                            [.50, 'rgb(45, 94, 119)'],
                            [.50, 'rgb(51, 107, 134)'],
                            [1, 'rgb(34, 72, 91)']]}
                            }]
                    }] //series ends
                }); //Highcharts.Chart ends
            }); //function ends
        }
        smileys();

Answer 1

对我来说听起来像一个典型的分组条形图？ http://jsfiddle.net/highcharts/KrTbz/9/

函数笑脸（） {

var chart;
$(function() {
    chart = new Highcharts.Chart({
        chart: {
            renderTo: 'container',
            type: 'bar',
            backgroundColor: 'transparent',
        },
        title: {
            text: null
        },
        subtitle: {
            text: null
        },
        xAxis: {
            tickLength: 0,
            lineWidth: 0,
            categories: ['Awesome', 'MARGIN-BOTTOM:40 PREVIOUS', 'Good', 'MARGIN-BOTTOM:40 PREVIOUS', 'Okay', 'MARGIN-BOTTOM:40 PREVIOUS', 'Awful', 'MARGIN-BOTTOM:40 PREVIOUS'],
            title: {
                text: null
            },
            labels: {
                enabled: true,
                color: '#fff',
            }
        },
        yAxis: {
            max: 100,
            min: 0,
            gridLineWidth: 0,
            title: {
                text: null
            },
            labels: {
                enabled: false,
            }
        },
        tooltip: {
            enabled: false
        },
        plotOptions: {
            bar: {
                dataLabels: {
                    enabled: true,
                    color: '#f60'
                },
                borderWidth: 0,
                borderRadius: 3
            }
        },
        legend: {
            enabled: false
        },
        credits: {
            enabled: false
        },
        series: [{
            type: 'bar',
            shadow: false,
            data: [{
                name: 'Awesome',
                y: 88,
                color: {
                    linearGradient: {
                        x1: 0,
                        y1: 0,
                        x2: 1,
                        y2: 0
                    },
                    stops: [
                        [0, 'rgb(66, 121, 54)'],
                        [.50, 'rgb(86, 146, 71)'],
                        [.50, 'rgb(97, 159, 79)'],
                        [1, 'rgb(120, 182, 98)']]
                }
                },
            {
                name: 'Good',
                y: 75,
                color: {
                    linearGradient: {
                        x1: 0,
                        y1: 0,
                        x2: 1,
                        y2: 0
                    },
                    stops: [
                        [0, 'rgb(167, 195, 100)'],
                        [.50, 'rgb(183, 206, 128)'],
                        [.50, 'rgb(192, 213, 145)'],
                        [1, 'rgb(207, 223, 170)']]
                }
                },
            {
                name: 'Okay',
                y: 95,
                color: {
                    linearGradient: {
                        x1: 0,
                        y1: 0,
                        x2: 1,
                        y2: 0
                    },
                    stops: [
                        [0, 'rgb(211, 127, 39)'],
                        [.50, 'rgb(220, 151, 52)'],
                        [.50, 'rgb(224, 163, 57)'],
                        [1, 'rgb(232, 186, 72)']]
                }
                },
            {
                name: 'Awful',
                y: 68,
                color: {
                    linearGradient: {
                        x1: 0,
                        y1: 0,
                        x2: 1,
                        y2: 0
                    },
                    stops: [
                        [0, 'rgb(190, 63, 36)'],
                        [.50, 'rgb(203, 83, 48)'],
                        [.50, 'rgb(208, 94, 53)'],
                        [1, 'rgb(220, 116, 66)']]
                }
                }]},
        {
            type: 'bar',
            data: [{
                name: 'Awesome Previous',
                y: 85,
                color: {
                    linearGradient: {
                        x1: 0,
                        y1: 0,
                        x2: 1,
                        y2: 0
                    },
                    stops: [
                        [0, 'rgb(62, 131, 161)'],
                        [.50, 'rgb(45, 94, 119)'],
                        [.50, 'rgb(51, 107, 134)'],
                        [1, 'rgb(34, 72, 91)']]
                }
                },
            {
                name: 'Good Previous',
                y: 50,
                color: {
                    linearGradient: {
                        x1: 0,
                        y1: 0,
                        x2: 1,
                        y2: 0
                    },
                    stops: [
                        [0, 'rgb(62, 131, 161)'],
                        [.50, 'rgb(45, 94, 119)'],
                        [.50, 'rgb(51, 107, 134)'],
                        [1, 'rgb(34, 72, 91)']]
                }
                },
            {
                name: 'Okay Previous',
                y: 85,
                color: {
                    linearGradient: {
                        x1: 0,
                        y1: 0,
                        x2: 1,
                        y2: 0
                    },
                    stops: [
                        [0, 'rgb(62, 131, 161)'],
                        [.50, 'rgb(45, 94, 119)'],
                        [.50, 'rgb(51, 107, 134)'],
                        [1, 'rgb(34, 72, 91)']]
                }
                },
            {
                name: 'Awful Previous',
                y: 88,
                color: {
                    linearGradient: {
                        x1: 0,
                        y1: 0,
                        x2: 1,
                        y2: 0
                    },
                    stops: [
                        [0, 'rgb(62, 131, 161)'],
                        [.50, 'rgb(45, 94, 119)'],
                        [.50, 'rgb(51, 107, 134)'],
                        [1, 'rgb(34, 72, 91)']]
                }
                }]}] //series ends
    }); //Highcharts.Chart ends
}); //function ends

}

笑脸（）;