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

来源：互联网发布：量角度软件编辑：程序博客网时间：2024/05/08 06:03

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.这样就正常了

1 0