Flot柱状图如何并列显示

jquery的flot画柱状图时，如果有多个数据源，柱子都重叠到一起了，像这样：

或者数据源之间align属性设置不一样时，“left”和“center”都存在时，柱状图会像这样：

纠结了吧？姐来给你展示一下高端操作！

1. 首先找到源码：jquery.flot.js 里的 function drawSeriesBars(series) { }  函数:

JS代码：

function drawSeriesBars(series) {            function plotBars(datapoints, barLeft, barRight, fillStyleCallback, axisx, axisy) {                var points = datapoints.points, ps = datapoints.pointsize;                for (var i = 0; i < points.length; i += ps) {                    if (points[i] == null)                        continue;                    drawBar(points[i], points[i + 1], points[i + 2], barLeft, barRight, fillStyleCallback, axisx, axisy, ctx, series.bars.horizontal, series.bars.lineWidth);                }            }            ctx.save();            ctx.translate(plotOffset.left, plotOffset.top);            // FIXME: figure out a way to add shadows (for instance along the right edge)            ctx.lineWidth = series.bars.lineWidth;            ctx.strokeStyle = series.color;            var barLeft;            switch (series.bars.align) {                case "left":                    barLeft = 0;                    break;                case "right":                    barLeft = -series.bars.barWidth;                    break;                default:                    barLeft = -series.bars.barWidth / 2;            }            var fillStyleCallback = series.bars.fill ? function (bottom, top) { return getFillStyle(series.bars, series.color, bottom, top); } : null;            plotBars(series.datapoints, barLeft, barLeft + series.bars.barWidth, fillStyleCallback, series.xaxis, series.yaxis);            ctx.restore();        }

2. 可以根据需求修改该函数中的以下代码片段：

由于姐有四根柱子，于是姐有了这样的操作：给属性 align 加了两个值，right1 和 left1 ，分别表示靠右向左排列的柱子和靠左向右排列的柱子。。。<表达不清楚了，反正就是左右各加一个柱子^o^!>

            var barLeft;            switch (series.bars.align) {                case "left":                    barLeft = 0;                    break;                case "right":                    barLeft = -series.bars.barWidth;                    break;                case "right1":                    barLeft = -(series.bars.barWidth*2);                    break;                case "left1":                    barLeft = series.bars.barWidth;                    break;                default:                    barLeft = -series.bars.barWidth / 2;            }

of course you can have better ideassssssssssssssssssss!

3. 给数据源中加入柱子的属性：

var dataset = [    { label: "预算金额", data: data1, color: "blue" , bars:{align:"right1", barWidth: 0.25}},    { label: "实际金额", data: data2, color: "yellow",bars:{align:"right",  barWidth: 0.25} },    { label: "预算金额", data: data3, color: "green", bars:{align:"left",   barWidth: 0.25}},    { label: "实际金额", data: data4, color: "red",   bars:{align:"left1",  barWidth: 0.25} }];

好了柱子就这样排好了，又有新问题啦，鼠标放上去悬浮还是原来的位置呀，这就尴尬了, 嗯  - - !

如何解决悬浮不准确的问题呢？我也不知道啊，我在研究研究去。。。。。

4. hover的相对位置还是默认的同样需要修改，要与对应的柱状图在同一位置：

在同一个js中找到function drawBarHighlight(series, point) {}函数，同样的代码改的和前面一样。           

function drawBarHighlight(series, point) {            var highlightColor = (typeof series.highlightColor === "string") ? series.highlightColor : $.color.parse(series.color).scale('a', 0.5).toString(),                fillStyle = highlightColor,                barLeft;            switch (series.bars.align) {                case "left":                    barLeft = 0;                    break;                case "right":                    barLeft = -series.bars.barWidth;                    break;                default:                    barLeft = -series.bars.barWidth / 2;            }            octx.lineWidth = series.bars.lineWidth;            octx.strokeStyle = highlightColor;            drawBar(point[0], point[1], point[2] || 0, barLeft, barLeft + series.bars.barWidth,                    function () { return fillStyle; }, series.xaxis, series.yaxis, octx, series.bars.horizontal, series.bars.lineWidth);        }

switch片段改为：

            var barLeft;            switch (series.bars.align) {                case "left":                    barLeft = 0;                    break;                case "right":                    barLeft = -series.bars.barWidth;                    break;                case "right1":                    barLeft = -(series.bars.barWidth*2);                    break;                case "left1":                    barLeft = series.bars.barWidth;                    break;                default:                    barLeft = -series.bars.barWidth / 2;            }

鼠标悬浮的时候，图高亮显示的是对了，但鼠标悬浮的位置还是老位置。。。又尴尬了。

最终，我放弃了flot，用我熟悉的 echarts 了。哈哈哈哈哈哈 ^o^ !!!!!!!!!