amChartsのLazyLoad

Question

私は作業中ですamChartsドーナツチャート。

私はチャートを作成し、スライスとラベルの両方にイベントを与えることができます。

私のグラフでは、rollOverSliceイベントを追加しました。

次に、ページがその特定のセクションにスクロールするとグラフを作成するために、LazyLoadのスクリプトをいくつか追加しました。

グラフはLazyLoad、 で作成されていますが、ラベルのロールオーバーイベントが機能していません。

以下は、チャートとLazyLoadの作成に使用されるスクリプトです。

スクリプト

/*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はすでにcompletlyロードされ、作成が同期しているためだと思う]今せずに動作します）

私は別の関数にイベントリスナーを追加するために行を抽出したので、初期化時とグラフが描画されたときに呼び出すことができます。このようにして、ハンドラは常に登録されるべきです。

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]); 
    } 
} 

私もそれが視野に別の時刻を取得した場合ので、あなたはreanimateチャートを呼び出すことができる変数visibleを導入しました。

更新日はfiddleです。