最近在用jquery的flot画图,折线图饼图都没啥问题,一到柱状图就来事了,如果多个数据源,柱子都重叠到一起了,像这样:
度娘谷哥搜了一大圈,找了一个插件,专门处理这种情况的,但是郁闷的调了半天愣是没反应,该什么样还什么样,眼看工期将至,一咬牙,看源码吧。原来这个插件是在动态调整每个bar的barLeft属性,见代码红色处(jquery.flot.multibar.js):
(function ($) {
function init(plot) {
var multiple = true;
var sArray = [];
var totWidth = 0;
function procRawData(plot, series, data, datapoints) {
if(series.bars.show) {
sArray.push(series);
}
}
function procDatapoints(plot, series, datapoints) {
//Ensure we only process these once
if(series.bars.show && series.bars.barLeft==undefined) {
if(totWidth==0) {
for(var j = 0; j < sArray.length; j++) {
totWidth+=sArray[j].bars.barWidth;
}
}
var runWidth=0;
for(var k = 0; k < sArray.length; k++) {
s=sArray[k];
if(s==series) {
break;
}
runWidth+=s.bars.barWidth;
}
series.bars.barLeft = runWidth-(totWidth/2);
}
}
function checkMultipleBarsEnabled(plot, options) {
if (options.multiplebars) {
multiple = options.multiplebars;
sArray=[];
totWidth=0;
plot.hooks.processRawData.push(procRawData);
plot.hooks.processDatapoints.push(procDatapoints);
}
}
plot.hooks.processOptions.push(checkMultipleBarsEnabled);
}
var options = { multiplebars: true };
$.plot.plugins.push({
init: init,
options: options,
name: "multiplebars",
version: "0.1"
});
})(jQuery);
但是可恶的是,jquery.flot.js自己却重新给barLeft赋值了,见红色代码(jquery.flot.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();
}
所以,果断的加上判断,要用bars自己的barLeft:
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;
if(series.bars.barLeft != undefined){
barLeft = series.bars.barLeft;
}else{
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();
}
终于显示成如下样子了:
相关推荐
jQuery flot API文档 中文版(经整理,里面有相关参数说明,对使用jQuery flot进行图表开发有帮助)
JQuery Flot 统计图 非常实用的统计图
代码能直接运行,运行在html和jsp中都可,有完整的文件,点击其中的html文件即可看到效果
NULL 博文链接:https://chinaxxren.iteye.com/blog/700105
Jquery Flot Pyramid Master
jQuery flot 0.5jar包,是一个新兴的js框架,加快js在html中的编码,使js与html分离
jquery.flot.axislabels.js
Flot是Ole Laursen开发的基于JQuery的纯JavaScript实现的绘图库,Flot使用起来非常简单,绘图效果相当绚丽,而且还支持一些图片的操作功能,例如图片的缩放。
jQueryflot图表插件,里面含有丰富的基本实例
Flot类库基于jQuery,支持绘制实时和可进行交互的图表
JQuery Flot 画图插件 +实例源码 使用非常方便,效果非常漂亮
NULL 博文链接:https://roger86.iteye.com/blog/837379
有flot官网所有资料,包括demo,所有js以及中文翻译后的flot API,完全支持jQuery,简单易学,图形丰富充实,可作为商用。
具有简单使用,交互效果,具有吸引力外观特点,它的特色之一是支持Ajax动态显示。非常强大的图表绘制插件,使用操作简单,有什么不懂的,请留言。
jquery.flot.time.js
jquery.flot.addTitle.js 向绘图画布添加标题。 安装 在包含 jquery.flot.js 之后,只需包含 jquery.flot.addTitle.js。 例子: < script src =' /flot/jquery.flot.addTitle.js ' > </ script > ...
使用SignalR、jQueryFlot和ASP.NETMVC创建图表以显示实时实时数据_JavaScript_C#_下.zip
众所周知,通过jquery可以实现很好的图表效果,并且代码易懂,容易扩展,这里提供有jqplot中文API:http://www.jqplot.com/;... 另外,还有jschart和flot,虽然不常用,但是可以作为学习参考使用。
Attractive JavaScript charts for jQuery