在高级图表中对动态数据进行分组

Question

我正在尝试创建一个由动态数据填充的高清图，其外观类似于下图：

y轴（技术上只是带有inverted: true标签的x轴）是按位置分组的人员列表。但是，我无法显示按位置分组的数据以及显示的位置。实际视图并不重要，只是它整齐地分组数据并显示位置。

我到目前为止所做的只是排序数据并将位置名称标记到此人的末尾，但这不是我想要的：

我知道这对于类别和数据系列来说是相对容易的事情，但我能找到的唯一例子并不涉及动态数据。以下是我目前的一些代码：

         function loadChart() {
            //calculate height based on number of users displayed, and width based on the panel body width
            var chartHeight = users.length * 20 + 75;
            var chartWidth = $('#InOutPanelViewId').width();

            chart = Highcharts.chart('ChartViewId', {
                chart: {
                    width: chartWidth,
                    height: chartHeight,
                    type: 'columnrange',
                    inverted: true,
                    spacingLeft: 0
                },
                title: {
                    text: null
                },
                xAxis: {
                    showEmpty: false,
                    title: null,
                    type: 'category',
                    labels: {
                        align: 'right',
                        format: '{value.User}',
                        style: {
                            color: 'black',
                            fontSize: '12pt'
                        }
                    }
                },
                yAxis: {
                    showEmpty: false,
                    title: '',
                    type: 'datetime',
                    dateTimeLabelFormats: {
                        second: '%I:%M %P',
                        minute: '%I:%M %P',
                        hour: '%I:%M %P',
                        day: '%I:%M %P',
                        week: '%I:%M %P',
                        month: '%I:%M %P',
                        year: '%I:%M %P'
                    },
                    min: startTime.valueOf(),
                    max: endTime.valueOf(),
                    plotLines: [{
                        color: 'grey',
                        value: time,
                        width: 1.5
                    }]
                },
                legend: {
                    enabled: false
                },
                credits: {
                    enabled: false
                },
                series: [
                    { name: "Data", borderWidth: 0, data: chartData }
                ],
                tooltip: {
                    formatter: function () {
                        return '<b>' + this.point.jobcode + '</b><br>' + this.point.timespan + '<br>';
                    }
                }
            });
        }

chartData目前看起来像这样：

chartData[chartData.length] = { name: user, low: displayStart.valueOf(), high: displayEnd.valueOf(), timespan: timeSpan, jobcode: value.JobCodeName, color: colour };

并且填充了从端点提取的动态数据。端点也会发送回位置，所以我想知道如何使用这个结构以及我要发回的位置来对数据进行分组并很好地显示它。

感谢任何帮助，谢谢！