javascript - 适用于amCharts的LazyLoad

我正在研究amCharts甜甜圈图。

我能够创建图表并为 slice 和标签提供事件。

对于我的图表，我添加了一个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

最佳答案

您的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，因此如果下次查看图表，您可以将reanimate称为图表。

这是更新的fiddle。