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

我开始制作一个列范围高图表，用于显示基于年份的事件。这最初符合我的要求。但随着越来越多的数据进入，结果变得太混乱，特别是当事件间隔很近时。如下所示：

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

我尝试查找HighChart列范围API

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

但这还远远不是我真正需要的

首先，我刚刚做了一个工作来垂直显示月份。然而，我需要一个强大的方法来为每个月的axis分类

事件也显示在网格线上，理想情况下，我希望一种类型的所有事件都包含在两个水平网格线上

每个月的事件可以从零到任何变化。因此，栅格间距应相应调整

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

如有任何建议，我们将不胜感激

正在复制下面的fiddler代码以供将来参考：

 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'}
                ]
        }]

    });

---

第一点很清楚，但我不理解另外两点。网格线只是从下到上的一条直线，如果您的事件（不同类型）具有不同的长度，您希望如何绘制一条直线来限制事件？或者你想为每种事件类型创建一个不同的立方体？@morganfree希望你能看看碎片小提琴。基本上，我这里讲的是水平网格线。在两条水平网格线之间，我希望所有事件（其中每一个事件水平且垂直位于另一个事件的下方）都不要接触网格线。小提琴应该使它更清晰将您的数据分成多个系列-每个事件类型一个系列。定位将自动完成。我的要求比这稍微高一点，但不管怎样，你的评论还是有帮助的。特别是离网格线的距离，不像我的小提琴。你能解释一下你代码中的series对象吗。为什么使用箭头功能？第一点很清楚，但我不了解其他两个。网格线只是从下到上的一条直线，如果您的事件（不同类型）具有不同的长度，您希望如何绘制一条直线来限制事件？或者你想为每种事件类型创建一个不同的立方体？@morganfree希望你能看看碎片小提琴。基本上，我这里讲的是水平网格线。在两条水平网格线之间，我希望所有事件（其中每一个事件水平且垂直位于另一个事件的下方）都不要接触网格线。小提琴应该使它更清晰将您的数据分成多个系列-每个事件类型一个系列。定位将自动完成。我的要求比这稍微高一点，但不管怎样，你的评论还是有帮助的。特别是离网格线的距离，不像我的小提琴。你能解释一下你代码中的series对象吗。为什么使用箭头功能？