Question

我认为这是一个普遍的问题，不需要我的highcharts数据提供太多信息。

我想阻止列堆叠/重叠，我该怎么做？

请参阅下面的图片链接，了解它现在的情况

http://highslide.com/forum/download/file.php?id=3157

jsfiddle：http://jsfiddle.net/Dzs5q/

Answer 1

请尝试在此处重现错误@ http://jsfiddle.net/jugal/bgNBG/

默认情况下，Highcharts会巧妙地减少列的宽度，如果有太多的列，以避免重叠。

如果您通过指定column.pointWidth

覆盖了上述默认行为，则列将倾向于重叠

    column: {           
        pointWidth : 10
    }

例如：@ http://jsfiddle.net/jugal/bgNBG/2/

为避免重叠，我看到你有两个选择。

选项＃1。删除column.pointWidth
这将使列更薄以便不重叠例如：@ http://jsfiddle.net/jugal/bgNBG/

选项＃2。使用column.dataGrouping
这将有助于具有恒定的列宽，但减少（通过分组）列的数量，以避免混乱/重叠。

dataGrouping = {
    groupPixelWidth: 40, // Minimum width for each column
    units: [[            // Permissible groupings
        'day',
        [1, 2, 3,4,5,6]  // 1,2,3,4,5,6 days may be grouped into 1 column
        ]]
}

例如：@ http://jsfiddle.net/jugal/JraJW/4/
类似问题@ https://stackoverflow.com/a/12354111/1566575

Answer 2

控制列并确保它们不会相互堆叠/重叠的最佳方法是控制图表的宽度。你可以在包含<div>的内容中执行此操作。

CSS: min-width〜允许div改变大小，但限制它在一定宽度以下。你这样做是因为你知道一旦它在那个宽度下，东西开始模糊并且不可读。
CSS: width〜强制图表的宽度允许为某个值。
CSS: no width set〜请注意，如果您将浏览器窗口缩小到远，则会开始使图表无法读取。

通过控制包含div的宽度并将标签旋转为c0deNinja建议，可以防止大多数堆栈重叠/重叠问题。但是，如果您的图表有许多系列/数据点，那么即使这样也无济于事。

Answer 3

我的问题很相似，我无法使用将项目移动到辅助轴等的解决方案。然后我发现我的x轴被识别为连续体（在这种情况下：日期），两个重叠的列当然是共享相同的x值。

我通过选择x轴解决了这个问题，找到了名为＆＃34的选项;轴类型＆＃34;并取消选择＆＃34;根据数据自动选择＆＃34;将其更改为＆＃34;文本轴＆＃34;。这让我的专栏并排。

您的问题有点过期但可能有帮助。

如何防止Highcharts中的列重叠

3 个答案: