Javascript amCharts的懒散负载

我正在制作

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

/*延迟加载代码从这里开始*/
AmCharts.lazyLoadMakeChart=AmCharts.makeChart；
//重写makeChart函数
AmCharts.makeChart=函数（a、b、c）{
//设置滚动事件
jQuery（document）.on（'scroll load touchmove'，handleScroll'）；
jQuery（window）.on（'load'，handleScroll）；
函数handleScroll（）{
var$=jQuery；
如果（真===b.lazyLoaded）
返回；
var hT=$（'#'+a）.offset（）.top，
hH=$（'#'+a）.outerHeight（）/2，
wH=$（窗口）.height（），
wS=$（window.scrollTop（）；
如果（wS>（hT+hH-wH））{
b、 懒散=真；
AmCharts.lazyLoadMakeChart（a、b、c）；
返回；
}
}
//返回假侦听器以避免错误
返回{
addListener:function（）{}
};
};
/*延迟加载代码到此结束*/
var chart=AmCharts.makeChart（“chartdiv”{
“类型”：“馅饼”，
“撤离持续时间”：0.5，
“拉出半径”：“5”，
“主题”：“光”，
“数据提供者”：[{
“头衔”：“Aaa”，
“价值”：10，
}, {
“头衔”：“Bbb”，
“价值”：10，
}, {
“标题”：“Ccc”，
“价值”：10，
}, {
“标题”：“Ddd”，
“价值”：10，
}, {
“标题”：“Eee”，
“价值”：10，
}],
“标题字段”：“标题”，
“valueField”：“value”，
“标签半径”：50，
“半径”：“35%”，
“内半径”：“85%”，
“标签文本”：“[[标题]]”，
“出口”：{
“已启用”：真
},
“基色”：“7a4436”，
“pullOutOnlyOne”：没错，
“startEffect”：“easeOutSine”，
“pullOutEffect”：“EaseOutline”，
“拉出半径”：0，
“文本”：“，
“听众”：[{
“事件”：“rollOverSlice”，
“方法”：功能（e）{
var dp=e.dataItem.dataContext；
document.getElementById（“结果”）.innerText=dp.title+'：'+dp.value；
}
}]
});
chart.addListener（“init”，function（））{
var d=chart.chartData；
对于（变量i=0；i

是否可以创建带有

LazyLoad

和标签滚动的图表

如果不可能，当向下滚动到有图表的部分时，有没有办法再次设置图表的动画

---

您的

makeChart

函数返回一个对象，该对象只有一个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

和

draw

处理程序在初始化时都不会被触发，但它现在就可以工作了[我认为这是因为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]);
    }
}

函数addLabelEvent（）{
var d=chart.chartData；
对于（变量i=0；i

我还引入了一个变量

visible

，以便在下次查看时调用图表

---

这是更新后的。

在调整窗口大小后未触发翻滚标签事件。@Ullas进行了编辑。正如我已经提到的：奇怪的是，在图表初始化时没有执行任何处理程序。