Highcharts条形图固定网格尺寸

Question

我正在尝试制作3个独立的条形图，其间距线/网格线之间的距离相同（不确定我应该使用哪个）

对于我的图表，我想根据数据数组中的数据点数来计算图表区域的高度。长度数应与图表的像素数相乘，以创建一个响应图表，网格线之间的距离相同。

情况：http://i.imgur.com/V6z0V9z.jpg

$(function() {

      $(document).ready(function() {

            var dateArray = ['01-01-2014', '02-01-2014', '03-01-2014', '04-01-2014', '05-01-2014'];
            var typeArray = [107, 31, 63, 90, 30];
            var channelArray = [60, 31, 89, 10, 50, 30, 60, 31, 89, 10, 50, 30, 60, 31, 89, 10, 50, 30];
            var perDateArray = [100, 10, 90, 10, 90];
            var breakNumberOfCharacters = 10;
            var dataArrays = [{
              color: '#3366CC',
              name: 'Ticket Amount',
              data: perDateArray
            }];

            var channelArrays = [{
              color: '#3366CC',
              data: channelArray
            }];

            var typeArrays = [{
              color: '#3366CC',
              name: 'Year 1800',
              data: typeArray
            }];

            var groupPaddingValue = '.35';
            var barWidth = 10;


            var graphTicketsPerDateHeight = (30 * perDateArray.length) + 60;
            var graphVerkoopKanaalHeight = (30 * channelArray.length) + 60;
            var graphTickTypesHeight = (30 * typeArray.length) + 60;
            var marginVar = [48, 10, 20, 75];

            console.log(graphTickTypesHeight + ' - ' + graphVerkoopKanaalHeight + ' - ' + graphTicketsPerDateHeight);

            $('#graphsTickTypes').highcharts({
              chart: {
                type: 'bar',
                height: graphTickTypesHeight,
                margin: marginVar,
                spacing: [25, 0, 0, 75],
              },


              title: {
                text: ''
              },
              subtitle: {
                text: ''
              },


              xAxis: {
                categories: ['Adults', 'Youth', 'Children', 'Senior', 'Student', 'Membership'],
                title: {
                  text: null
                },
                labels: {
                  align: 'left',
                  x: -75,
                  width: 70
                },
                lineColor: '#C0C0C0',
                gridLineWidth: 1,
                gridLineColor: '#C0C0C0',
                tickColor: '#FFFFFF',
                gridZIndex: 1,
                endOnTick: true
              },


              yAxis: {
                min: 0,
                maxPadding: 0,
                startOnTick: true,
                endOnTick: true,
                lineColor: '#C0C0C0',
                lineWidth: 1,
                tickColor: '#FFFFFF',
                title: {
                  text: ''
                },
                labels: {
                  overflow: 'justify'
                }
              },


              tooltip: {
                formatter: function() {
                  return '<span style=" margin-right: 10px; font-weight: bold; color:' + this.series.color + ';">' + this.y + '     </span>' + '<span style=" font-weight: bold; color: #000000; margin: 0 20px">' + this.x + '</span>';
                },
                hideDelay: 100,
                borderColor: '#000000',
                positioner: function(boxWidth, boxHeight, point) {
                  return {
                    x: point.plotX / 2 + 20,
                    y: point.plotY - 10
                  };
                }
              },


              plotOptions: {
                series: {
                  pointWidth: barWidth,
                  //pointPadding: 0,
                  groupPadding: groupPaddingValue,
                  borderWidth: 0,
                  events: {
                    legendItemClick: function() {
                      return false;
                    }
                  }
                },
                bar: {
                  grouping: true,
                  dataLabels: {
                    enabled: false
                  }
                }
              },


              legend: {
                align: 'top',
                verticalAlign: 'top',
                width: 400,
                layout: 'horizontal',
                symbolHeight: 10,
                symbolWidth: 10,
                y: -30,
                x: -83,
                margin: 30,
                labelFormat: 'Ticket Amount',
                itemStyle: {
                  "cursor": "default",
                  "fontWeight": "normal"
                }
              },


              credits: {
                enabled: false
              },


              series: typeArrays
            });

这里：var graphTickTypesHeight =（30 * typeArray.length）+ 60;我尝试使每个网格间距为标签和图例的元素数量的30倍+ 60。

如果我能够仅仅编辑包含条形图的区域的高度，那将是很棒的，但我似乎无法隔离该区域，我必须改变整体的高度。

希望你们其中一个人能解决这个问题。

非常感谢，

BAS