在Highcharts.js條形圖中控制條之間的間距和高度

Question

我試圖從我的圖表中找出如何控制頂部/底部的間距，高度和條形圖的位置，我需要對齊所有條形圖以從左上角開始，然后將高度分別設置為30像素，然后設置2個邊距每個條的頂部/底部，單擊任何條之后，如果所有條的高度大於容器的原始高度，則所有條的放置都將相同。然后調整圖表大小以適應更新的圖形？ 我知道聽起來很復雜，有人做到過嗎？

我創建了一個詳細的highchart.js

這是布局應如何的示例：

這是我的js：

$(function () {
            $('#container').highcharts({
                chart: 
                {
                    type: 'bar',
                    backgroundColor: 'red',
                    spacingTop: 20,
                    spacingBottom: 20,
                    height: 400
                },
                title: {
                    text: null
                },
                subtitle: {},
                xAxis: {
                    type: 'category',
                    labels: {
                        style: {
                            fontSize: '14px',
                            textAlign: 'right',
                            paddingTop: '10px',
                            paddingRight: '10px',
                            paddingBottom: '10px',
                            //background: '#fff',
                        },
                        useHTML : true
                    }
                },
                yAxis: {
                    labels: {
                        align: 'center'
                    },
                    title: {
                        text: null
                    }

                },
                legend: {
                    enabled: false
                },
                plotOptions: {
                    series: {
                        color: '#d0d1d1',
                        borderWidth: 2,
                        borderColor: "#fff",
                        pointPadding: 0,
                        groupPadding: 0,            },
                },

                tooltip: 
                {
                    enabled: false
                },
                credits: 
                {
                    enabled: false
                },
                series: [{
                    data: [{
                        name: "Asia",
                        y: 56.33,
                        drilldown: "Microsoft Internet Explorer"
                    }, {
                        name: "North America",
                        y: 24.03,
                        drilldown: "Chrome"
                    }, {
                        name: "South America",
                        y: 10.38,
                        drilldown: "Firefox"
                    }, {
                        name: "Europe",
                        y: 4.77,
                        drilldown: "Safari"
                    }, {
                        name: "Australia",
                        y: 0.91,
                        drilldown: "Opera"
                    }, {
                        name: "Africa",
                        y: 32.33,
                        drilldown: "Opera"
                    }]
                }],
                drilldown: {
                    series: [{
                        id: "Microsoft Internet Explorer",
                        data: [
                            [
                                "v11.0",
                                24.13,
                            ],
                            [
                                "v8.0",
                                17.2
                            ],
                            [
                                "v9.0",
                                8.11
                            ],
                            [
                                "v10.0",
                                5.33
                            ],
                            [
                                "v6.0",
                                1.06
                            ],
                            [
                                "v7.0",
                                0.5
                            ]
                        ]
                    }, {
                        name: "Chrome",
                        id: "Chrome",
                        data: [
                            [
                                "v40.0",
                                5
                            ],
                            [
                                "v41.0",
                                4.32
                            ],
                            [
                                "v42.0",
                                3.68
                            ],
                            [
                                "v39.0",
                                2.96
                            ],
                            [
                                "v36.0",
                                2.53
                            ],
                            [
                                "v43.0",
                                1.45
                            ],
                            [
                                "v31.0",
                                1.24
                            ],
                            [
                                "v35.0",
                                0.85
                            ],
                            [
                                "v38.0",
                                0.6
                            ],
                            [
                                "v32.0",
                                0.55
                            ],
                            [
                                "v37.0",
                                0.38
                            ],
                            [
                                "v33.0",
                                0.19
                            ],
                            [
                                "v34.0",
                                0.14
                            ],
                            [
                                "v30.0",
                                0.14
                            ]
                        ]
                    }, {
                        name: "Firefox",
                        id: "Firefox",
                        data: [
                            [
                                "v35",
                                2.76
                            ],
                            [
                                "v36",
                                2.32
                            ],
                            [
                                "v37",
                                2.31
                            ],
                            [
                                "v34",
                                1.27
                            ],
                            [
                                "v38",
                                1.02
                            ],
                            [
                                "v31",
                                0.33
                            ],
                            [
                                "v33",
                                0.22
                            ],
                            [
                                "v32",
                                0.15
                            ]
                        ]
                    }, {
                        name: "Safari",
                        id: "Safari",
                        data: [
                            [
                                "v8.0",
                                2.56
                            ],
                            [
                                "v7.1",
                                0.77
                            ],
                            [
                                "v5.1",
                                0.42
                            ],
                            [
                                "v5.0",
                                0.3
                            ],
                            [
                                "v6.1",
                                0.29
                            ],
                            [
                                "v7.0",
                                0.26
                            ],
                            [
                                "v6.2",
                                0.17
                            ]
                        ]
                    }, {
                        name: "Opera",
                        id: "Opera",
                        data: [
                            [
                                "v12.x",
                                0.34
                            ],
                            [
                                "v28",
                                0.24
                            ],
                            [
                                "v27",
                                0.17
                            ],
                            [
                                "v29",
                                0.16
                            ]
                        ]
                    }]
                }
            });
            });

Answer 1

使用drilldown和drillup drilldown事件來設置軸的新高度，它將使用您想要的空間： http : //jsfiddle.net/oe236652/4/

        events: {
            drilldown: function (e) {
                this.xAxis[0].update({
                    height: 34 * e.seriesOptions.data.length
                }, false);
            },
            drillup: function (e) {
                this.xAxis[0].update({
                    height: 34 * e.seriesOptions.data.length
                }, false);
            }
        }

另外設置xAxis.height創建圖表，當series.pointWidth ：

    xAxis: {
        height: 34 * 6, // (30 + 2*2) * number_of_points
        ...
    },

    plotOptions: {
        series: {
            pointWidth: 30,
            ...
        },
    },

注意：我建議為圖表設置高度，以足以渲染所有條形（單擊“北美”），或者在drillup / drilldown使用setSize(w, h)設置圖表的新大小。