2011-07-08 71 views
1

我正在嘗試使用jQuery圖表插件Flot製作堆積條形圖。數據以json格式進入兩個系列:[{「label」:「Uncategorized」,「data」:[[1309374000000,「3448876」],[1309377600000,「3352757」] ...Stacked Bar Flot Graph中的白色空白

看起來它和現在發生的事情是一樣的問題,但沒有回覆。 http://groups.google.com/group/flot-graphs/browse_thread/thread/c6445ff7dce59ea0/e996979c40bc3f6b?show_docid=e996979c40bc3f6b

任何人看到這個錯誤或知道我應該在哪裏看?

任何過去最基本的堆疊示例似乎都有嚴重問題。

我已經試過倒過來沒有任何運氣的系列。所有數據在日期和日期之間對應。

http://rpbailey.net/flotError.PNG

編輯:我海軍報選項...正在創建兩個圖表,看第二(底部)之一。

   //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}]

+0

我們可以看到您的實際頁面嗎? –

+0

我們需要查看您爲Flot設置的選項的一些源代碼。 –

+0

我們可以得到一個數據樣本嗎?堆疊圖表可能在某些系列組合中存在一些問題。 –

回答

1

一舉兩得的一系列有數據點的一樣多嗎?由於您留下了一些數據,我無法從中分辨出來。這似乎是一個令人煩惱的問題,但是如果在每個系列中沒有相同數量的[x,y]對,這些圖表就很奇怪。如果未定義,則使用null代替[x,y]。我在考慮除了一個非常破壞的插件之外還有什麼其他問題,因爲我之前已經繪製了類似的東西,並且出現了一些問題,但我無法再訪問該代碼。

嘗試從您的代碼中刪除objOptions2 = jQuery.extend(objOptions2, objYaxes); 。再說一次,這個插件並不是最好的,並且對Flot的一些屬性有問題。

也嘗試從objOptions2刪除barWidth: intBar

請嘗試單獨刪除它們。

除此之外,嘗試將有問題的圖表放在頁面上,除了相關內容外,不要使用其他HTML/CSS/Javascript。

1

我有同樣的問題,但不得不提及兩個jquery.flot.stack.js同時也jquery.flot.stack.min.js

一旦我刪除了JS分鐘REF空白差距問題走開...

+0

你是對的,確保你需要jquery.float.stack一次 – Eldar