如何在列范围图表中细分x轴以在一个刻度间隔中显示多行

Question

我开始制作列范围高图表，用于显示基于年份的事件。这最初符合我的要求。但是，当事件间隔紧密时，随着更多数据的移动变得过于混乱。如下所示：

我现在正在寻找将所有这些事件垂直地显示在彼此之下但仍然分类在一起，以便4-5个红色事件在它们各自的水平位置垂直显示，然后是一堆蓝色事件，依此类推。基本上我正在寻找一种细分垂直轴的方法（在列范围图表中称为x轴）。

我尝试过查看HighChart列范围API here

根据这个链接并根据我的要求进行编辑，我已经能够制作一个图表来展示我在寻找什么。看看here

但这仍然远非我所需要的

1. 首先，我刚刚完成了垂直显示月份的工作。 Howeevr我需要一种强有力的方法来为每个月分类轴。
2. 事件也出现在网格线上，理想情况下，我希望一种类型的所有事件都在两条水平网格线内进行杵状持。
3. 每个月的活动可能从零到任何不等。因此网格间距应相应调整。

可能是我没有根据我的要求使用确切的图表类型。但我看不到任何其他类型符合这些要求。

任何建议都表示赞赏。

复制下面的提琴代码以供将来参考：

 Highcharts.chart('container', {

        chart: {
            type: 'columnrange',
            inverted: true
        },

        title: {
            text: 'Events by month'
        },

        subtitle: {
            text: ''
        },

        xAxis: {
            categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
            tickInterval : 3,
            gridLineWidth: 1,
            gridLineColor: '#aaa',
            gridLineOffset : 10,
            labels: {
                            align: 'center',
                            x: -20,
                            y: 30,

                        }
        },

        yAxis: {
            title: {
                text: 'Events by Month'
            }
        },

        tooltip: {
            valueSuffix: ''
        },

        plotOptions: {
            columnrange: {
                dataLabels: {
                                format: '{point.name}',
                                enabled: true,
                                align: 'center',
                                color: '#000',
                                inside: true,
                                allowOverlap: true,
                                style: {
                                    textShadow: false,
                                    fontWeight: 'normal'
                                }
                            }
            }
        },

        legend: {
            enabled: false
        },

        series: [{
            name: 'Events',
            data: [
                    {low :3, high:6.4, name :"Event1", color:'red'},
                {low :0, high:4, name :"Event2",color:'red'},
                {low :1, high:3, name :"Event3",color:'red'},
                {low :2, high:2.4, name :"Event4", color:'green'},
                {low :3, high:5, name :"Event5", color:'green'},
                {low :4, high:7, name :"Event6", color:'green'},
                {low :3, high:6.4, name :"Event7", color:'green'},
                {low :0, high:4, name :"Event8", color:'blue'},
                {low :1, high:3, name :"Event9", color:'blue'},
                {low :2, high:2.4, name :"Event10", color:'blue'},
                {low :3, high:5, name :"Event11", color:'blue'},
                {low :4, high:7, name :"Event12", color:'blue'}
                ]
        }]

    });