Highcharts在分组和堆叠条形图中调整条形图的大小

在前面的一个问题中，PawełFus非常友好地为我提出了一个分组堆栈条形图解决方案。您可以在此处找到问题和答案以了解上下文：

我现在正尝试使用这种方法，但我遇到了很多问题，因为这种方法似乎根本无法很好地扩展。在前一篇文章中的场景中，每组只有两个条形图，这是一个简单的例子。实际上，酒吧的数量可以是任意的。按照Pawel Fus的回答中所述的方法，只需添加第三个条就可以打破它。原因是点位置取决于条数，这是一个很容易解决的问题，但您很快就会意识到，这些条不会自动调整以适应宽度。看一下这个JSFIDLE，它是我所说内容的一个简单演示：

因此，我的问题是：

对于我最初的问题，有没有更好的解决方案可以避免这一切？ 假设这是正确的方法，我如何计算并相应地设置这些条的宽度，然后设置正确的点位置。我确实发现我可以得到图表高度，但直到Highcharts对象被创建，并且我正在通过编程创建这个Highcharts配置，所以我当时无法访问它。

---

您可以尝试不同的方法，但格式化数据并不是那么明显：或者这一种：-现在每个垂直列都是不同的堆栈，堆栈的名称实际上并不重要。格式化程序必须更改

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

简化数据：

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

---

因此，我们尝试了很多方法，但最终决定Highcharts不适合做这种事情。我们已经将此反馈给了我们的UX团队，作为我们目前可以使用Highcharts实现的限制。与此同时，作为权宜之计，我们已使我们的标签更具信息性。这是以使这些标签非常庞大为代价的

---

我确实同意用户体验设计，即有时将堆叠的条形图分组到图表中，以便为最终用户生成清晰易读的图表是有意义的。我环顾了一下其他的图表框架，并没有看到任何人提供这样做的方法。我不会说highcharts落后于它的竞争对手，但如果它选择实现这样一个易于使用的功能，它肯定会使自己与众不同

再次感谢您的参与。非常感谢。当每个组/类别中有30个项目，并且有许多类别/组时，这些差距不会出现。感觉我真的在努力让海图做一些它不该做的事情。我不知道如何前进。这是真的-一般来说，它不支持直接在高图表。我的建议只是权宜之计，而不是真正的解决办法。另外，检查-也许点放置的解释对您以前的解决方法有点帮助？或者我只是不完全理解这个问题。。

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