控制 Highcharts.js 条形图中条形之间的间距和高度

Question

我试图弄清楚如何控制图表中条形的顶部/底部间距、高度和位置，我需要将所有条形对齐从左上角开始，然后将每个高度设置为 30 像素，然后每个条的顶部/底部有 2 个边距，在您单击任何此条后，所有条的位置都相同，如果所有条的高度大于容器的原始高度...然后将图表大小调整为适应更新的图表？我知道听起来很复杂，有没有人做到过这样的事情？

我创建了一个drilldown 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 事件为轴设置新高度，这将使用您想要的空间：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) .