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.這樣就正常了
