用于 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 创建图表并为标签也滚动？

如果不可能，当向下滚动到包含图表的部分时，是否有任何方法可以再次为图表设置动画？

Here's the fiddle demo

Answer 1

您的 makeChart 函数 returns 一个对象，它只有一个 mock 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。

用于 amCharts 的延迟加载

LazyLoad for amCharts

javascript

amcharts