控制Highcharts条形图外观和布局

我有一个条形图，其中的数据来自数据库，因此我不知道它将包含多少类别或系列，但我仍然希望以相同的标准外观显示不同的图表（相同的条形图宽度、条形图之间的间距、类别之间的间距等）

图表宽度必须为600px，每个条形图的宽度必须为20px。条之间的空间必须为5px，类别之间的空间必须为20px。高度应该根据这些值来计算，因为我认为海图本身并不能做到这一点

我试图通过将pointWidth设置为20px，然后计算高度来解决这个问题。但我不确定pointPadding和groupPadding的值。它说它的值是以x轴为单位给出的。我的x轴仅包含类别（即水果：柠檬、橘子、苹果等）。此类类别的x轴单位是多少

---

我制作了一个小提琴示例，根据类别数、系列数、点宽度、点填充、组填充计算图表高度：

var pointWidthInPx = 20,
    spaceBetweenBarsInPx = 5,
    groupPaddingInPx = 5,
    categories = ['Africa', 'America', 'Asia', 'Europe', 'Oceania'],
    series = [{
            name: 'Year 1800',
            data: [107, 55, 635, 203, 30]
        }, {
            name: 'Year 1900',
            data: [133, 156, 550, 408, 45]
        }, {
            name: 'Year 2008',
            data: [500, 604, 404, 632, 60]
        }];

var totalPointWidthsInPx = pointWidthInPx * categories.length * series.length,
    totalSpaceBetweenBarsInPx = spaceBetweenBarsInPx * categories.length * (series.length - 1),
    totalGroupPaddingsInPx = (groupPaddingInPx * 2) * categories.length,
    calculatedHeightInPx = totalPointWidthsInPx + totalSpaceBetweenBarsInPx + totalGroupPaddingsInPx;

var groupPadding = (groupPaddingInPx * categories.length) / calculatedHeightInPx;    

奇怪的是，我似乎无法正确获得groupPadding或pointPadding的正确像素值

---

任何关于如何解决此问题的帮助都将不胜感激。

您需要根据需要计算图表的高度。例如：

---

谢谢唯一的问题是，在fiddle链接中生成的图形看起来有点奇怪（在第一个类别中只有一个条，其余的有两个条，除了最后一个条）。系列2是最上面的一个（深蓝色）。

function genChart(n) {
    var pointWidth = 20;
    var h = (pointWidth + 10) * 2 * n + 50 + 70;
    // + 10- distance between bars
    // * 2 - number of series
    // +50+70 - margins top + bottom
    // n - number of points
    if ($('#container').highcharts()) {
        $('#container').highcharts().destroy();
    }
    $('#container').highcharts({
        chart: {
            type: 'bar',
            marginTop: 50,
            marginBottom: 70,
            height: h
        },
        plotOptions: {
            bar: {
                pointWidth: pointWidth,
                groupPadding:0,
            }
        },
        series: [{
            data: randomData(n)
        }, {
            data: randomData(n)
        }]
    });
}

function randomData(n) {
    var d = [];
    while (n--) {
        d.push(Math.random());
    }
    return d;
}

$("button").click(function () {
    genChart(Math.round(Math.random() * 20) + 4);
});