Question

因此，我一直在尝试找到一种正确执行此操作的方法，但据我所知，目前尚不可能。希望有人能证明我错了。

某些背景

：

我正在尝试绘制时间线以跟踪吉拉的门票。不用担心获取数据并在单独的行上绘制每个项目，因为highcharts对我来说差不多。

高级一些：

进一步改善视觉体验，我想基于某种东西（在我的情况下为Jira中的单个组件）将不同的物品分组，为同一组中的物品赋予相同的颜色，以便观看者可以看到有些事情可能有关。通过将多个系列与类别一起使用，即使做到这一点也非常简单。

问题：

因此，在使用类别和多个系列（一个项目/系列）进行分组时，绘图开始表现得很奇怪。

似乎每个类别（轴）都为每个系列保留空间，即使一个类别中可能只有一个项目。这样会产生过多的空格，迫使项目变得非常狭窄。

请参见小提琴here

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

});

我想要的：

我不想让每个项目的宽度都相对于组中的可用空间，而不是创建大量的空白，或，如果组轴本身可以根据内部项目调整宽度（所有项目的宽度相同）。

我发现了一些类似的问题，但不是正确的解决方案。在this 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/

Highcharts多个系列删除保留的空间

1 个答案: