Flot柱状图如何并列显示

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/NicoleSmith/article/details/77977600

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^ !!!!!!!!!






展开阅读全文

没有更多推荐了,返回首页