javascript - 如何防止Highcharts中的列重叠

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。 删除 这将使列更薄以便不重叠， 例如：@ http://jsfiddle.net/jugal/bgNBG/column.pointWidth

选项 #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：没有设置宽度~注意如果你把浏览器窗口缩小到很远，它开始使图表不可读。

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

​</p>

Answer 3

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

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

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