Highcharts несколько серий удалить зарезервированное пространство

Question

Итак, я пытался найти способ сделать это правильно, но, насколько я понимаю, это невозможно сейчас.Надеясь, что кто-то может доказать, что я не прав.

Некоторая справка:

Я пытаюсь составить график, чтобы отслеживать билеты в Джира.Не беспокойтесь о получении данных и прорисовке каждого элемента в отдельных строках, так как старшие диаграммы в значительной степени делают это для меня.

Немного более продвинутое:

Пройдя немного дальше, чтобы улучшить впечатления от просмотра, я бы хотел сгруппировать различные элементы на основе чего-либо (в моем случае, одного компонентав Jira), присвойте элементам той же группы один и тот же цвет, чтобы зритель мог видеть, что некоторые вещи могут быть связаны.Даже это действительно просто сделать, используя несколько серий вместе с категориями.

Проблема:

Таким образом, при группировании по категориям и нескольким сериям (один элемент / серия) построение графика начинает вести себя странно.

Кажется, что каждая из категорий (осей) резервирует место для каждой серии , даже если в одной категории может быть только один элемент.Это создает слишком много пустого пространства, заставляя элементы становиться действительно узкими.

См. Скрипку здесь

<script src="https://code.highcharts.com/js/highcharts.js"></script>
<script src="https://code.highcharts.com/js/modules/xrange.js"></script>
<script src="https://code.highcharts.com/js/modules/exporting.js"></script>

<div id="container"></div>

Highcharts.chart('container', {
    chart: {
        type: 'xrange'
    },
    title: {
        text: 'Highcharts X-range'
    },
    xAxis: {
        type: 'datetime'
    },
    yAxis: {
        title: {
            text: ''
        },
        categories: ['Prototyping', 'Development', 'Testing'],
        reversed: true
    },
    series: [{
        data: [{
            x: Date.UTC(2014, 10, 21),
            x2: Date.UTC(2014, 11, 2),
            y: 0
        }]
    },{
        data: [{
            x: Date.UTC(2014, 11, 2),
            x2: Date.UTC(2014, 11, 5),
            y: 1
        },]
    },{
        data: [{
            x: Date.UTC(2014, 11, 2),
            x2: Date.UTC(2014, 11, 5),
            y: 2
        },]
    },{
        data: [{
            x: Date.UTC(2014, 11, 2),
            x2: Date.UTC(2014, 11, 5),
            y: 1
        },]
    },{
        data: [{
            x: Date.UTC(2014, 11, 2),
            x2: Date.UTC(2014, 11, 5),
            y: 1
        },]
    },{
        data: [{
            x: Date.UTC(2014, 11, 2),
            x2: Date.UTC(2014, 11, 5),
            y: 2
        },]
    }]

});

Что я хочу:

Вместо создания большого количества пустого пространства я хочу, чтобы ширина каждого элемента была относительно пространства, доступного в группе, или , если сами оси группы могли регулировать свою ширину в соответствии с элементамивнутри (и все предметы одинаковой ширины).

Я нашел несколько похожих вопросов, но не нашел правильного решения.В этой проблеме github решение состоит в том, чтобы установить для группировки значение false, но при этом элементы в той же категории будут перекрываться, вместо того, чтобы иметь собственную строку.

Буду очень признателен, если кто-нибудь сможет мне помочь!

Answer 1

Такое поведение не поддерживается в Highcharts по умолчанию, но я создал несколько экспериментальных решений.Мы можем изменить размеры и положение точек на основе рассчитанных значений:

    events: {
        render: function() {
            var series = this.series,
                categoryWidth = this.yAxis[0].toPixels(2) - this.yAxis[0].toPixels(1),
                pointWidth,
                rectEl,
                y,
                levels = [];

            Highcharts.each(series, function(s) {
                if (!levels[s.yData[0]]) {
                    levels[s.yData[0]] = [s.index]
                } else {
                    levels[s.yData[0]].push(s.index)
                }
            });

            Highcharts.each(levels, function(level) {
                if (level.length > 1) {
                    pointWidth = categoryWidth / level.length;
                    y = series[level[0]].points[0].shapeArgs.y;

                    Highcharts.each(level, function(index) {
                        rectEl = series[index].points[0].graphic.element.children[0];

                        rectEl.setAttribute('height', pointWidth);
                        rectEl.setAttribute('y', y);
                        y += pointWidth;
                    });
                }
            });
        }
    }

Демо-версия: http://jsfiddle.net/BlackLabel/y8uqsx5h/