Javascript-форум (https://javascript.ru/forum/)
-   Элементы интерфейса (https://javascript.ru/forum/dom-window/)
-   -   Скрипт работает только в Firebug (https://javascript.ru/forum/dom-window/23822-skript-rabotaet-tolko-v-firebug.html)

photos-masters 07.12.2011 18:06

Скрипт работает только в Firebug
 
Здравствуйте

Есть такая проблема:
Скрипт написанный мной работает, но только при построковой отладке в FireBug, а просто при загрузке страницы, работает некорректно.
Собственно вот функция которая не работает:
function createChart(renderTo, title, defaultSeriesType, csvDir, legend, filter, line, marker) {
debugger
var options = null;
    if(filter!=null){
        csvDir = csvDir+'&'+filter;
    }
    options = {
                        chart: {
                                renderTo: renderTo,
                                defaultSeriesType: defaultSeriesType,
                                marginRight: 30,
                                marginBottom: 70
                        },
                        title: {
                                text: title,
                                x: -20 //center
                        },
                        xAxis: {
                                categories: [],
                                labels: {
                                    rotation: 270,
                                    step: 10,
                                    y: 35,
                                    style: {
                                         fontWeight: 'bold'
                                     }
                                },
                                showLastLabel: true,
                                showFirstLabel: true
                        },
                        yAxis: {
                            min: 0,
                            title: {
                               text: '' 
                            },
                                plotLines: [{
                                        value: 0,
                                        width: 1,
                                        color: '#808080'
                                }]
                        },
                        plotOptions: {
                            line: {
                                marker: {
                                    enabled: line
                                }
                            }
                        },
                        legend: {
                            enabled: legend,
                             align: 'center',
                             verticalAlign: 'top',
                             y: 20,
                             floating: true,
                             borderWidth: 0
                        },
                        tooltip: {
                        formatter: function() {
                              return '<b>'+ this.series.name +'</b><br/>'+
                           this.x +': '+ this.y;
                        }
                        },
                        series: []
                };
                
                $.get(csvDir, function(data) {
                // Split the lines
                var lines = data.split('\n');
                $.each(lines, function(lineNo, line) {
                        var items = line.split(',');

                        // header line containes categories
                        if (lineNo == 0) {
                                $.each(items, function(itemNo, item) {
                                        if (itemNo > 0) options.xAxis.categories.push(item);
                                });
                        }

                        // the rest of the lines contain data with their name in the first position
                        else {
                                var series = { 
                                        data: []
                                };
                                $.each(items, function(itemNo, item) {
                                        if (itemNo == 0) {
                                                series.name = item;
                                        } else {
                                                series.data.push(parseFloat(item));
                                        }
                                });
                                options.series.push(series);

                        }

                });
                
                categoriesCount = options.xAxis.categories.length;
                if(categoriesCount <= 35){
                    step = 2;
                }else if(categoriesCount > 35 && categoriesCount <= 150){
                    step = 5;
                }else{
                    step = 10;
                }
                options.xAxis.labels.step = step;

               return options;
        });
    flag = false;
    var rgraphdata = [];
        $.each(options.series, function(itemNo, serie) { 
        if(serie.data.length > 0){
                rgraphdata.push(serie.data);
                flag = true;
        }
        });
    if(flag == true){
       if(rgraphdata.length == 1){
           rgraphdata = rgraphdata[0];
       } 
    }
    var rgraphcategories = [];
    i = 0;
    $.each(options.xAxis.categories, function(itemNo, category) {
        q = i/options.xAxis.labels.step;
        if(q % 1 == 0){
            rgraphcategories.push(category);
        }else{
            rgraphcategories.push("");
        }
        i++;
    });
    alert(rgraphdata.length);
    if (defaultSeriesType == 'line'){
    var rgraph1 = new RGraph.Line(renderTo, rgraphdata);
    }else {
    var rgraph1 = new RGraph.Bar(renderTo, rgraphdata);
    }
    rgraph1.Set('chart.background.grid', true);
    rgraph1.Set('chart.linewidth', 2);
    rgraph1.Set('chart.gutter.left', 35);
    rgraph1.Set('chart.hmargin', 5);
    rgraph1.Set('chart.gutter.bottom', 50);
    if (!document.all || RGraph.isIE9up()) {
    rgraph1.Set('chart.shadow', true);
    }
//    rgraph1.Set('chart.tickmarks', marker);
//    rgraph1.Set('chart.tickmarks.linewidth', 1);
    rgraph1.Set('chart.background.grid.autofit', true);
    rgraph1.Set('chart.background.grid.autofit.numhlines', 10);
    rgraph1.Set('chart.curvy', true);
    rgraph1.Set('chart.curvy.factor', 0.5); // This is the default
    rgraph1.Set('chart.animation.unfold.initial',0);
    rgraph1.Set('chart.text.size',6);
    rgraph1.Set('chart.text.font','Arial');
    rgraph1.Set('chart.text.angle',45);
    rgraph1.Set('chart.labels',rgraphcategories);
    rgraph1.Set('chart.title',title); 

    if (RGraph.isOld()) {
        rgraph1.Draw();
    } else {
        RGraph.Effects.Line.jQuery.Trace(rgraph1);
    } 
                
}


Строка "alert(rgraphdata.length);" при простой загрузке страницы выдает 0, а при отладке в FireBug - размер массива.

Помогите мне пожалуйста понять в чём здесь подвох.

Спасибо

photos-masters 07.12.2011 18:24

Вижу что проблема в
$.each(options.xAxis.categories, function(itemNo, category)
, а конкретней в том, что цикл не желает работать с
options.xAxis.categories
хотя это вроде как массив.

photos-masters 07.12.2011 18:58

Ещё замечена странность:
Если, например, между 108 и 109 строками вставить строку:
alert(options.xAxis.categories.length)

Она будет выдавать постоянно 0 но графики при этом будут выводится корректно.
Мистика какая-то:)

photos-masters 07.12.2011 19:04

Вот нашел способ как заставить всё работать правильно, нужно установить небольшую паузу в работе скрипта:
Между 108 и 109 строками добавляем:
setTimeout(function() {

и в конце функции:
} ,2000);


Решение какое-то странное, может есть у кого лучше идеи?

devote 07.12.2011 19:12

писать код без ошибок, объявлять переменные нормально, используя var и т.д. и все будет ок.


Часовой пояс GMT +3, время: 01:47.