堆积条形图中的白色间隙
我正在尝试使用jQuery图表插件Flot制作堆叠条形图。
两个系列的数据都是以json格式传入的：[{“label”：“未分类”，" data ":[1309374000000，"3448876",1309377600000，"3352757"...
这看起来和这里发生的问题是一样的，但是没有回复。http://groups.google.com/group/flot-graphs/browse_thread/thread/c6445ff7dce59ea0/e996979c40bc3f6b?show_docid=e996979c40bc3f6b
有没有人看过这个错误，或者知道我应该去哪里看？
除了最基本的堆叠示例之外，任何其他堆叠都会出现严重的问题。
我试着颠倒了这一系列，但没有任何运气。所有数据都是按日期排序的，并且日期对应于系列之间的日期。
http://rpbailey.net/flotError.PNG
编辑:我的flot选项...正在创建两个图表，查看第二个(底部)图表。
//get the date format
strTimeFormat = "%y/%m/%d";
if(strOb == 'Hour'){ strTimeFormat = "%y/%m/%d %H"; arrMinTick = [1, 'hour']; intBar = 1000000}
if(strOb == 'Day'){ strTimeFormat = "%y/%m/%d"; arrMinTick = [1, 'day']; intBar =100000000}
if(strOb == 'Month' | strOb == 'Quarter'){ strTimeFormat = "%y/%m"; arrMinTick = [1, 'month'];intBar = 3000000000}
objOptions = {
colors:[ '#dddddd','#00ff00','#ffff00','#ff0000']
,series:{points:{show:true},lines:{show:true},stack:0}
,xaxis: { mode: "time", timeformat: strTimeFormat, minTickSize: arrMinTick }
}
objOptions2 = {
series:{bars:{show:true, barWidth: intBar}, stack:-1000000}
,xaxis: { mode: "time", timeformat: strTimeFormat }
}
if(mode == 'percentage'){
objYaxes = { yaxis:{
alignTicksWithAxis: 1
,position: 'right'
,tickFormatter: function(label, series){ return label +"%"; }
}};
//add on th yaxes options.
objOptions = jQuery.extend(objOptions, objYaxes);
objOptions2 = jQuery.extend(objOptions2, objYaxes);
console.log(objOptions);
}
//top chart
jQuery.getJSON('includes/webRepFunctions.php', {chart:'risk',start:strStart,stop:strStop,ob:strOb,metric:mode}, function(data) {
jQuery.plot(jQuery("#flot1"),data,objOptions);
});
//bottom chart
jQuery.getJSON('includes/webRepFunctions.php', {chart:'cat',start:strStart,stop:strStop,ob:strOb,metric:mode}, function(data) {
jQuery.plot(jQuery("#flot2"),data,objOptions2);
});
}编辑2:一些更多的样本数据...
[{"label":"Uncategorized","data":[[1309374000000,"3448876"],[1309377600000,"3352757"],[1309381200000,"2897092"],[1309384800000,"2747047"],[1309388400000,"2693610"],[1309392000000,"2511211"],......[1310097600000,"1404290"]],"yaxis":1},{"label":"Categorized","data":[[1309374000000,"1371941"],[1309377600000,"1273494"],[1309381200000,"1505119"],[1309384800000,"1463382"],[1309388400000,"1316429"],[1309392000000,"1201810"],......[1310097600000,"611780"]],"yaxis":1}]
回答 2
Stack Overflow用户
发布于 2011-07-09 02:27:08
您的两个系列是否具有相同数量的数据点？我不能从这个判断，因为你已经遗漏了一些数据。这似乎是一个令人烦恼的问题，但如果每个系列中的[x,y]对数量不相同，这些图就会表现得很奇怪。如果它是未定义的，请使用null代替[x,y]。我在想除了一个非常坏的插件之外还有什么问题，因为我以前也画过类似的东西，有一些问题，但我不能再访问那些代码了。
尝试从代码中删除objOptions2 = jQuery.extend(objOptions2, objYaxes);。再说一次，这个插件并不是最好的，而且Flot的一些属性也有问题。
还可以尝试从objOptions2中删除barWidth: intBar。
尝试分别删除它们。
除此之外，尝试将有问题的图表单独放在页面上，除了相关的以外，没有其他HTML/CSS/Javascript。
Stack Overflow用户
发布于 2011-10-09 04:06:29
我也有同样的问题，但是我同时引用了jquery.flot.stack.js和jquery.flot.stack.min.js
一旦我删除了min js ref，空白空格的问题就消失了…
https://stackoverflow.com/questions/6627986
复制相似问题
腾讯云开发者
