Question

我正在尝试使用jQuery图表插件Flot制作堆积条形图。

这两个系列的数据以json格式输入：[{“label”：“Uncategorized”，“data”：[[1309374000000，“3448876”]，[1309377600000，“3352757”] ...... < / p>

这似乎与此处发生的问题相同，但未发布任何回复。 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}]

Answer 1

你的两个系列都有相同数量的数据点吗？我无法分辨，因为你已经离开了一些数据。这似乎是一个令人讨厌的问题，但如果你在每个系列中没有相同数量的[x,y]对，这些图表会很奇怪。如果未定义，请使用null代替[x,y]。我正在考虑除了一个非常破碎的插件之外还有什么问题，因为我之前已经绘制了类似的东西并且遇到了一些问题，但我再也无法访问该代码了。

尝试删除objOptions2 = jQuery.extend(objOptions2, objYaxes); 从你的代码。同样，这个插件并不是最好的插件，并且在Flot的某些属性方面存在问题。

同时尝试从barWidth: intBar删除objOptions2。

尝试单独删除它们。

除此之外，尝试单独将图表放在页面上，除了相关内容之外，没有其他HTML / CSS / Javascript。

Answer 2

我有同样的问题，但是同时引用了jquery.flot.stack.js和jquery.flot.stack.min.js

一旦我移除了min js ref，白色空间间隙问题就消失了......

堆积条形图图中的白色间隙

2 个答案: