如何防止Highcharts中的列重叠 [英] How to prevent column overlap in Highcharts

问题描述

我认为这是一个普遍问题，不需要从我的高分数据中得到很多信息。

我想防止列彼此叠加/重叠，我是否这样做？

请参阅下面的图片链接，了解它是如何运作的。

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

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

解决方案

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

默认情况下，Highcharts智能降低列宽如果它们太多，以避免重叠。

如果您通过指定 column.pointWidth

 列：{
 pointWidth：10 
} 
  

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

所以为了避免重叠，我看到了两个选项。

选项＃1。删除 column.pointWidth

这将使列更薄以避免重叠

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

选项＃2。使用 column.dataGrouping

这将有助于获得恒定的列宽，但是可以减少（通过分组）列数来避免混乱/重叠。

  dataGrouping = {
 groupPixelWidth：40，//每列的最小宽度
 units：[[ //允许的分组
'日'，
 [1,2,3,4,5,6] // 1,2,3,4,5,6天可分为1列
]] 
} 
  

例如：@ http://jsfiddle.net/jugal/JraJW/4/

相似的问题@ https://stackoverflow.com/a/12354111/1566575

I believe this is a general question not needing to much information from my highcharts data.

I want to prevent the columns to stack over/overlap each other, how do I do this?

See image-link below on how it is now

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

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

解决方案

Please try and reproduce the error here @ http://jsfiddle.net/jugal/bgNBG/

Highcharts by default smartly reduces width of the columns if there are way too many of them so as to avoid overlapping.

The columns will tend to overlap if you have overridden the aforementioned default behavior by specifying column.pointWidth

    column: {           
        pointWidth : 10
    }

eg: @ http://jsfiddle.net/jugal/bgNBG/2/

So to avoid overlapping, I see two options you have.

Option #1. Remove the column.pointWidth
This will make the columns thinner in order to not overlap
eg: @ http://jsfiddle.net/jugal/bgNBG/

Option #2. Use column.dataGrouping
This will help have a constant width of columns, but reducing (by grouping them) the number of columns instead to avoid clutter/overlap.

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

eg: @ http://jsfiddle.net/jugal/JraJW/4/
Similar Question @ https://stackoverflow.com/a/12354111/1566575

这篇关于如何防止Highcharts中的列重叠的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！