LazyLoad for amCharts

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创建图表，也可以为标签滚动？

如果不可能，当滚动到有图表的部分时，是否有任何方法再次动画图表？

这是小提琴的演示

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已经完全加载，并且创建是同步的)

我提取了行以将事件侦听器添加到单独的函数中，这样您就可以在初始化和绘制图表时调用它。这样，处理程序就应该始终注册。

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，以便您可以将复生称为图表，如果它下一次进入视图。

这是更新的小提琴。