Белые зазоры в графике - PullRequest
Новая
       45

Белые зазоры в графике

1 голос
/ 08 июля 2011

Я пытаюсь создать столбчатую диаграмму с накоплением, используя плагин jQuery, Flot.

Данные поступают для обеих серий в формате json: [{"label": "Uncategorized", "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

edit: мои параметры 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 ]

1 голос
/ 09 октября 2011

У меня была та же проблема, но была ссылка как на jquery.flot.stack.js, так и на jquery.flot.stack.min.js

Как только я удалил ссылку min js, проблема пробелов исчезла ...

1 голос
/ 08 июля 2011

Обе ваши серии имеют одинаковое количество точек данных?Я не могу сказать из этого, так как вы оставили некоторое количество данных.Это кажется утомительным вопросом, но эти графики ведут себя странно, если у вас нет одинакового количества [x,y] пар в каждой серии.Если он не определен, используйте null вместо [x,y].Я думаю о том, в чем еще может быть проблема, кроме очень испорченного плагина, потому что я что-то рисовал раньше и имел несколько проблем, но у меня больше нет доступа к этому коду.

Попробуйте удалить objOptions2 = jQuery.extend(objOptions2, objYaxes); из вашего кода.Опять же, этот плагин не самый лучший и имеет проблемы с некоторыми свойствами Flot.

Также попробуйте удалить barWidth: intBar из objOptions2.

Попробуйте удалить их отдельно.

Кроме того, попробуйте разместить соответствующую диаграмму на странице самостоятельно, без какого-либо другого HTML / CSS / Javascript, кроме того, что имеет отношение.

...