LazyLoad для amCharts

Question

Я работаю над amCharts Диаграмма пончика.

Я могу создать диаграмму и дать события как срезам, так и меткам.

Для моей диаграммы я добавил событие rollOverSlice.

Затем я добавил в график сценарий для диаграммы, чтобы создать диаграмму после прокрутки страницы к этому конкретному разделу.

Теперь диаграмма создается с помощью LazyLoad, , но событие опрокидывания для метки не работает.

Ниже приведен сценарий, используемый для создания диаграммы и LazyLoad.

Script

/*Lazy Load code starts here*/ 
AmCharts.lazyLoadMakeChart = AmCharts.makeChart; 

// override makeChart function 
AmCharts.makeChart = function(a, b, c) { 

    // set scroll events 
    jQuery(document).on('scroll load touchmove', handleScroll); 
    jQuery(window).on('load', handleScroll); 

    function handleScroll() { 
    var $ = jQuery; 
    if (true === b.lazyLoaded) 
     return; 
    var hT = $('#' + a).offset().top, 
     hH = $('#' + a).outerHeight()/2, 
     wH = $(window).height(), 
     wS = $(window).scrollTop(); 
    if (wS > (hT + hH - wH)) { 
     b.lazyLoaded = true; 
     AmCharts.lazyLoadMakeChart(a, b, c); 
     return; 
    } 
    } 

    // Return fake listener to avoid errors 
    return { 
    addListener: function() {} 
    }; 
}; 
/*Lazy Load code ends here*/ 

var chart = AmCharts.makeChart("chartdiv", { 
    "type": "pie", 
    "pullOutDuration": 0.5, 
    "pullOutRadius": "5", 
    "theme": "light", 
    "dataProvider": [{ 
    "title": "Aaa", 
    "value": 10, 
    }, { 
    "title": "Bbb", 
    "value": 10, 
    }, { 
    "title": "Ccc", 
    "value": 10, 
    }, { 
    "title": "Ddd", 
    "value": 10, 
    }, { 
    "title": "Eee", 
    "value": 10, 
    }], 
    "titleField": "title", 
    "valueField": "value", 
    "labelRadius": 50, 

    "radius": "35%", 
    "innerRadius": "85%", 
    "labelText": "[[title]]", 
    "export": { 
    "enabled": true 
    }, 
    "baseColor": "#7a4436", 
    "pullOutOnlyOne": true, 
    "startEffect": "easeOutSine", 
    "pullOutEffect": "easeOutSine", 
    "pullOutRadius": 0, 
    "balloonText": "", 
    "listeners": [{ 
    "event": "rollOverSlice", 
    "method": function(e) { 
     var dp = e.dataItem.dataContext; 
     document.getElementById("result").innerText = dp.title + ':' + dp.value; 
    } 
    }] 
}); 


chart.addListener("init", function() { 
    var d = chart.chartData; 
    for (var i = 0; i < d.length; i++) { 
    d[i].label.node.style.pointerEvents = "auto"; 
    d[i].label.node.style.cursor = "pointer"; 
    chart.addEventListeners(d[i].labelSet, d[i]); 
    } 
}); 

Можно ли создать таблицу с LazyLoad и опрокидыванию на этикетке тоже?

Если это невозможно, можно ли еще раз оживить диаграмму при прокрутке вниз до раздела, имеющего диаграмму?

Here's the fiddle demo

Answer 1

Ваш makeChart функция возвращает объект, который имеет только макет addListener метод. Поэтому, очевидно, более поздний добавленный слушатель не будет работать. Вам нужно подождать, пока диаграмма не будет создана, а затем добавьте ее.

function handleScroll() { 
    var $ = jQuery; 
    var hT = $('#' + a).offset().top, 
    hH = $('#' + a).outerHeight()/2, 
    wH = $(window).height(), 
    wS = $(window).scrollTop(); 
    if (wS > (hT + hH - wH)) { 
     if (!b.lazyLoaded) { 
      b.lazyLoaded = true; 
      visible = true; 
      chart = AmCharts.lazyLoadMakeChart(a, b, c); 
      var d = chart.chartData; 
      addLabelEvent(); 
      chart.addListener("drawn", addLabelEvent); 
      return; 
     } 
     if (!visible) { 
      chart.animateAgain(); 
      visible = true;   
     } 
    } else { 
     visible = false; 
    } 
} 

(почему-то ни init, ни drawn обработчик не обжигают при инициализации, но работает без прямо сейчас [я думаю, что его, потому что DOM уже загружен укомплектовать и создание синхронных тогда])

I 've выделил строки, чтобы добавить прослушиватель событий к отдельной функции, так что вы можете вызвать его при инициализации и при рисовании диаграммы. Таким образом, обработчик должен всегда регистрироваться.

function addLabelEvent() { 
    var d = chart.chartData; 
    for (var i = 0; i < d.length; i++) { 
     d[i].label.node.style.pointerEvents = "auto"; 
     d[i].label.node.style.cursor = "pointer"; 
     chart.addEventListeners(d[i].labelSet, d[i]); 
    } 
} 

Я также ввел переменную visible, так что вы можете вызвать reanimate график, если он попадает в поле зрения еще раз.

Обновлено fiddle.