Question

在上一个问题中，PawełFus非常友好地为我提出了一个分组堆栈条形图解决方案。您可以在此处找到问题和答案：Grouping a stacked bar chart in Highcharts

我现在正试图使用这种方法而且我遇到了问题，因为这似乎根本不能很好地扩展。在上一篇文章的场景中，每组只有两个栏，以保持一个简单的例子。实际上可能有任何数量的酒吧。按照Pawel Fus的答案中的方法，只需添加第三个条就可以打破它。原因是pointPlacement取决于条形图的数量，这是一个简单的修复，但你会很快意识到条形不会自动调整以考虑宽度。看一下这个jsfiddle的简单演示即时通讯：JsFiddle

Mandatory random code block to make Stack overflow happy... just ignore this code block.

所以我的问题是：

是否有更好的解决方案可以避免这一切？
假设这是正确的方法，我如何计算和设置这些条的宽度，然后设置正确的点位。我确实发现我可以获得图表高度，但直到创建Highcharts对象并且我以编程方式创建此Highcharts配置，因此我无法访问它。

Answer 1

您可以尝试不同的方法，但格式化数据不是那么明显：http://jsfiddle.net/1ktmb2d2/3/（或者这一个：http://jsfiddle.net/1ktmb2d2/4/） - 现在每个垂直列都是不同的堆栈，并且该堆栈的名称不是'真的很重要（格式化程序必须更改）。

注意：当每个类别显示不同数量的列时，它将始终在列数最低的类别中创建间隙。

简化数据：

    series: [{
        name: 'Happy',
        id: 'Happy',
        stack: 'Corolla',
        color: 'blue',
        data: [20, 30],
    }, {
        id: 'Unhappy',
        name: 'Unhappy',
        stack: 'Corolla',
        color: 'black',
        data: [10, 30],
    }, {
        linkedTo: 'Happy',
        stack: 'Prius',
        color: 'blue',
        data: [30, 30],
    }, {
        linkedTo: 'Unhappy',
        stack: 'Prius',
        data: [30, 30],
        color: 'black',
    }, {
        linkedTo: 'Happy',
        stack: 'Highlander',
        color: 'black',
        data: [30],
    }]

Answer 2

所以我们尝试了很多东西，但已经确定Highcharts并不打算做这类事情。我们已将此反馈意见提供给我们的UX团队，作为我们目前可以使用Highcharts实施的限制。与此同时，我们将标签作为止损提供了更多信息。这是以使这些标签非常笨重为代价的。

我同意UX设计，有时在我们的图表中对堆叠条形图进行分组以便为最终用户制作清晰易读的图表是有意义的。我环顾了其他图表框架，我没有看到有人提供这样做的方法。我不会说highcharts落后于它的竞争对手，但如果它选择实现这样一个易于使用的功能，它肯定可以区分它的自我

Highcharts在分组和堆叠的条形图中选择尺寸

2 个答案: