amchart四种不同图表滚动懒加载效果-html代码-BFW代码库

amchart四种不同图表滚动懒加载效果

代码语言：html

所属分类：图表

代码描述：amchart四种不同图表滚动懒加载效果

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">

<style>
.chartdiv {
  width: 500px;
  height: 300px;
  border: 1px solid #ccc;
  margin: 10px auto;
}

.chartgap {
  height: 700px;
  width: 1px;
  border-left: 2px dotted #ccc;
  margin: 10px auto;
}
</style>

</head>
<body translate="no">
<script type="text/javascript" src="http://repo.bfw.wiki/bfwrepo/js/amcharts.js"></script>
<script type="text/javascript" src="http://repo.bfw.wiki/bfwrepo/js/amcharts-serial.js"></script>
<script type="text/javascript" src="http://repo.bfw.wiki/bfwrepo/js/amcharts-pie.js"></script>
<script type="text/javascript" src="http://repo.bfw.wiki/bfwrepo/js/amcharts-light.js"></script>
<script type="text/javascript" src="http://repo.bfw.wiki/bfwrepo/js/jquery-3.2.1.min.js"></script>
<div id="chartdiv1" class="chartdiv"></div>
<div class="chartgap"></div>
<div id="chartdiv2" class="chartdiv"></div>
<div class="chartgap"></div>
<div id="chartdiv3" class="chartdiv"></div>
<div class="chartgap"></div>
<div id="chartdiv4" class="chartdiv"></div>
<div class="chartgap"></div>

<script>
/**
 * Lazy-init code (relies on jQuery)
 */

// save the real makeChart function for later
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 () {} };

};

/**
    * First chart
    */
var chart = AmCharts.makeChart("chartdiv1", {
  "type": "serial",
  "theme": "light",
  "dataProvider": [{
    "country": "USA",
    "visits": 3025,
    "color": "#FF0F00" },
  {
    "country": "China",
    "visits": 1882,
    "color": "#FF6600" },
  {
    "country": "Japan",
    "visits": 1809,
    "color": "#FF9E01" },
  {
    "country": "Germany",
    "visits": 1322,
    "color": "#FCD202" },
  {
    "country": "UK",
    "visits": 1122,
    "color": "#F8FF01" },
  {
    "country": "France",
    "visits": 1114,
    "color": "#B0DE09" },
  {
    "country": "India",
    "visits": 984,
    "color": "#04D215" },
  {
    "country": "Spain",
    "visits": 711,
    "color": "#0D8ECF" },
  {
    "country": "Netherlands",
    "visits": 665,
    "color": "#0D52D1" },
  {
    "country": "Russia",
    "visits": 580,
    "color": "#2A0CD0" },
  {
    "country": "South Korea",
    "visits": 443,
    "color": "#8A0CCF" },
  {
    "country": "Canada",
    "visits": 441,
    "color": "#CD0D74" }],

  "startDuration": 1,
  "graphs": [{
    "fillColorsField": "color",
    "fillAlphas": 0.9,
    "lineAlpha": 0.2,
    "type": "column",
    "valueField": "visits" }],

  "categoryField": "country",
  "categoryAxis": {
    "labelsEnabled": false },

  "titles": [{
    "text": "First chart" },
  {
    "text": "Scroll down for the next chart",
    "bold": false }] });



/**
                          * Second chart
                          */
var chart = AmCharts.makeChart("chartdiv2", {
  "theme": "light",
  "type": "serial",
  "dataProvider": [{
    "country": "USA",
    "year2004": 3.5,
   .........完整代码请登录后点击上方下载按钮下载查看