多个柱状图重叠显示问题 jQuery.flot

 

1.多个柱状图并列显示重叠问题再现，如下图情形：

2.分析出现重叠的原因

 

jquery.flot.js源码部分：

barWidth 假设为1

align 默认值的 center 坐标位置在x=-1处 （这里取得是柱状图的中心位置）,left 坐标位置 在x=0处,right坐标位置 在x=-0.5处

而barWidth 宽度为1，如此的相对位置必定有0.25的重叠区域。

            switch (series.bars.align) {

                case "left":

                    barLeft = 0;

                    break;

                case "right":

                    barLeft = -series.bars.barWidth;

                    break;

                default:

                    barLeft = -series.bars.barWidth / 2;

            }

 

 

3.解决重叠问题的办法

修改源码适应多个柱状图并列显示

 

/*jquery.flot.js自己却重新给barLeft赋值了 ,根据条形图的宽度需求来改

*/            switch (series.bars.align) {

                case "left":

                    barLeft = series.bars.barWidth / 2;

                    break;

                case "right":

                    barLeft = -series.bars.barWidth-series.bars.barWidth / 2;

                    break;

                default:

                    barLeft = -series.bars.barWidth / 2;

            }

 右边向右移动半个宽度，左边向左边移动半个宽度。

4.这样并排显示效果就好了

5.但会出现一个新的hover问题

 

6.分析hover问题

鼠标移上去，出现的参数的柱状图还是有偏移

 

align 默认值的 center 坐标位置在x=-1处 （这里取得是柱状图的中心位置）,left 坐标位置 在x=0处,right坐标位置 在x=-0.5处 ，而hover的相对位置还是默认没有改。

 

7.解决hover问题的办法

 

       switch (series.bars.align) {

                case "left":

                    barLeft = 0;

                    break;

                case "right":

                    barLeft = -series.bars.barWidth;

                    break;

                default:

                    barLeft = -series.bars.barWidth / 2;

            }

 

 

/*mouseover()的位置，也要与上面的条形图在同一位置。

 */         switch (series.bars.align) {

            case "left":

                barLeft = series.bars.barWidth / 2;

                break;

            case "right":

                barLeft = -series.bars.barWidth-series.bars.barWidth / 2;

                break;

            default:

                barLeft = -series.bars.barWidth / 2;

            }

8.这样就正常了