如何使用RequireJS制作amcharts animate插件？

Posted

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了如何使用RequireJS制作amcharts animate插件？相关的知识，希望对你有一定的参考价值。

我正在尝试这个例子为他们的网站并将其转换为使用requirejs，我不知道我做错了什么。

https://www.amcharts.com/demos/animated-time-line-pie-chart/

我加载了animate插件作为依赖项，我得到一个错误，animateData不是一个函数。

这是我正在使用的codepen：https://codepen.io/vtsang/pen/OEgdWL

requirejs.config({
  // Define paths; relative from js folder
  paths: {
    "amcharts": "//www.amcharts.com/lib/3/amcharts",
    "amcharts.funnel": "//www.amcharts.com/lib/3/funnel",
    "amcharts.gauge": "//www.amcharts.com/lib/3/gauge",
    "amcharts.pie": "//www.amcharts.com/lib/3/pie",
    "amcharts.radar": "//www.amcharts.com/lib/3/radar",
    "amcharts.serial": "//www.amcharts.com/lib/3/serial",
    "amcharts.xy": "//www.amcharts.com/lib/3/xy",
    "amcharts.plugins.animate":
      "https://www.amcharts.com/lib/3/plugins/animate/animate.min.js"
  },

  // Define dependencies
  shim: {
    "amcharts.funnel": {
      deps: ["amcharts"],
      exports: "AmCharts",
      init: function() {
        AmCharts.isReady = true;
      }
    },

      "amcharts.animate": {
      deps: ["amcharts"],
      exports: "AmCharts",
      init: function() {
        AmCharts.isReady = true;
      }
    },
    "amcharts.gauge": {
      deps: ["amcharts"],
      exports: "AmCharts",
      init: function() {
        AmCharts.isReady = true;
      }
    },
    "amcharts.pie": {
      deps: ["amcharts"],
      exports: "AmCharts",
      init: function() {
        AmCharts.isReady = true;
      }
    },
    "amcharts.radar": {
      deps: ["amcharts"],
      exports: "AmCharts",
      init: function() {
        AmCharts.isReady = true;
      }
    },
    "amcharts.serial": {
      deps: ["amcharts"],
      exports: "AmCharts",
      init: function() {
        AmCharts.isReady = true;
      }
    },
    "amcharts.xy": {
      deps: ["amcharts"],
      exports: "AmCharts",
      init: function() {
        AmCharts.isReady = true;
      }
    }
  }
});

requirejs(['amcharts.pie'],
  function() {
    buildChart();
  }
);

function buildChart() {
 /**
 * Define data for each year
 */
var chartData = {
  "1995": [
    { "sector": "Agriculture", "size": 6.6 },
    { "sector": "Mining and Quarrying", "size": 0.6 },
    { "sector": "Manufacturing", "size": 23.2 },
    { "sector": "Electricity and Water", "size": 2.2 },
    { "sector": "Construction", "size": 4.5 },
    { "sector": "Trade (Wholesale, Retail, Motor)", "size": 14.6 },
    { "sector": "Transport and Communication", "size": 9.3 },
    { "sector": "Finance, real estate and business services", "size": 22.5 } ],
  "1996": [
    { "sector": "Agriculture", "size": 6.4 },
    { "sector": "Mining and Quarrying", "size": 0.5 },
    { "sector": "Manufacturing", "size": 22.4 },
    { "sector": "Electricity and Water", "size": 2 },
    { "sector": "Construction", "size": 4.2 },
    { "sector": "Trade (Wholesale, Retail, Motor)", "size": 14.8 },
    { "sector": "Transport and Communication", "size": 9.7 },
    { "sector": "Finance, real estate and business services", "size": 22 } ],
  "1997": [
    { "sector": "Agriculture", "size": 6.1 },
    { "sector": "Mining and Quarrying", "size": 0.2 },
    { "sector": "Manufacturing", "size": 20.9 },
    { "sector": "Electricity and Water", "size": 1.8 },
    { "sector": "Construction", "size": 4.2 },
    { "sector": "Trade (Wholesale, Retail, Motor)", "size": 13.7 },
    { "sector": "Transport and Communication", "size": 9.4 },
    { "sector": "Finance, real estate and business services", "size": 22.1 } ],
  "1998": [
    { "sector": "Agriculture", "size": 6.2 },
    { "sector": "Mining and Quarrying", "size": 0.3 },
    { "sector": "Manufacturing", "size": 21.4 },
    { "sector": "Electricity and Water", "size": 1.9 },
    { "sector": "Construction", "size": 4.2 },
    { "sector": "Trade (Wholesale, Retail, Motor)", "size": 14.5 },
    { "sector": "Transport and Communication", "size": 10.6 },
    { "sector": "Finance, real estate and business services", "size": 23 } ],
  "1999": [
    { "sector": "Agriculture", "size": 5.7 },
    { "sector": "Mining and Quarrying", "size": 0.2 },
    { "sector": "Manufacturing", "size": 20 },
    { "sector": "Electricity and Water", "size": 1.8 },
    { "sector": "Construction", "size": 4.4 },
    { "sector": "Trade (Wholesale, Retail, Motor)", "size": 15.2 },
    { "sector": "Transport and Communication", "size": 10.5 },
    { "sector": "Finance, real estate and business services", "size": 24.7 } ],
  "2000": [
    { "sector": "Agriculture", "size": 5.1 },
    { "sector": "Mining and Quarrying", "size": 0.3 },
    { "sector": "Manufacturing", "size": 20.4 },
    { "sector": "Electricity and Water", "size": 1.7 },
    { "sector": "Construction", "size": 4 },
    { "sector": "Trade (Wholesale, Retail, Motor)", "size": 16.3 },
    { "sector": "Transport and Communication", "size": 10.7 },
    { "sector": "Finance, real estate and business services", "size": 24.6 } ],
  "2001": [
    { "sector": "Agriculture", "size": 5.5 },
    { "sector": "Mining and Quarrying", "size": 0.2 },
    { "sector": "Manufacturing", "size": 20.3 },
    { "sector": "Electricity and Water", "size": 1.6 },
    { "sector": "Construction", "size": 3.1 },
    { "sector": "Trade (Wholesale, Retail, Motor)", "size": 16.3 },
    { "sector": "Transport and Communication", "size": 10.7 },
    { "sector": "Finance, real estate and business services", "size": 25.8 } ],
  "2002": [
    { "sector": "Agriculture", "size": 5.7 },
    { "sector": "Mining and Quarrying", "size": 0.2 },
    { "sector": "Manufacturing", "size": 20.5 },
    { "sector": "Electricity and Water", "size": 1.6 },
    { "sector": "Construction", "size": 3.6 },
    { "sector": "Trade (Wholesale, Retail, Motor)", "size": 16.1 },
    { "sector": "Transport and Communication", "size": 10.7 },
    { "sector": "Finance, real estate and business services", "size": 26 } ],
  "2003": [
    { "sector": "Agriculture", "size": 4.9 },
    { "sector": "Mining and Quarrying", "size": 0.2 },
    { "sector": "Manufacturing", "size": 19.4 },
    { "sector": "Electricity and Water", "size": 1.5 },
    { "sector": "Construction", "size": 3.3 },
    { "sector": "Trade (Wholesale, Retail, Motor)", "size": 16.2 },
    { "sector": "Transport and Communication", "size": 11 },
    { "sector": "Finance, real estate and business services", "size": 27.5 } ],
  "2004": [
    { "sector": "Agriculture", "size": 4.7 },
    { "sector": "Mining and Quarrying", "size": 0.2 },
    { "sector": "Manufacturing", "size": 18.4 },
    { "sector": "Electricity and Water", "size": 1.4 },
    { "sector": "Construction", "size": 3.3 },
    { "sector": "Trade (Wholesale, Retail, Motor)", "size": 16.9 },
    { "sector": "Transport and Communication", "size": 10.6 },
    { "sector": "Finance, real estate and business services", "size": 28.1 } ],
  "2005": [
    { "sector": "Agriculture", "size": 4.3 },
    { "sector": "Mining and Quarrying", "size": 0.2 },
    { "sector": "Manufacturing", "size": 18.1 },
    { "sector": "Electricity and Water", "size": 1.4 },
    { "sector": "Construction", "size": 3.9 },
    { "sector": "Trade (Wholesale, Retail, Motor)", "size": 15.7 },
    { "sector": "Transport and Communication", "size": 10.6 },
    { "sector": "Finance, real estate and business services", "size": 29.1 } ],
  "2006": [
    { "sector": "Agriculture", "size": 4 },
    { "sector": "Mining and Quarrying", "size": 0.2 },
    { "sector": "Manufacturing", "size": 16.5 },
    { "sector": "Electricity and Water", "size": 1.3 },
    { "sector": "Construction", "size": 3.7 },
    { "sector": "Trade (Wholesale, Retail, Motor)", "size": 14.2 },
    { "sector": "Transport and Communication", "size": 12.1 },
    { "sector": "Finance, real estate and business services", "size": 29.1 } ],
  "2007": [
    { "sector": "Agriculture", "size": 4.7 },
    { "sector": "Mining and Quarrying", "size": 0.2 },
    { "sector": "Manufacturing", "size": 16.2 },
    { "sector": "Electricity and Water", "size": 1.2 },
    { "sector": "Construction", "size": 4.1 },
    { "sector": "Trade (Wholesale, Retail, Motor)", "size": 15.6 },
    { "sector": "Transport and Communication", "size": 11.2 },
    { "sector": "Finance, real estate and business services", "size": 30.4 } ],
  "2008": [
    { "sector": "Agriculture", "size": 4.9 },
    { "sector": "Mining and Quarrying", "size": 0.3 },
    { "sector": "Manufacturing", "size": 17.2 },
    { "sector": "Electricity and Water", "size": 1.4 },
    { "sector": "Construction", "size": 5.1 },
    { "sector": "Trade (Wholesale, Retail, Motor)", "size": 15.4 },
    { "sector": "Transport and Communication", "size": 11.1 },
    { "sector": "Finance, real estate and business services", "size": 28.4 } ],
  "2009": [
    { "sector": "Agriculture", "size": 4.7 },
    { "sector": "Mining and Quarrying", "size": 0.3 },
    { "sector": "Manufacturing", "size": 16.4 },
    { "sector": "Electricity and Water", "size": 1.9 },
    { "sector": "Construction", "size": 4.9 },
    { "sector": "Trade (Wholesale, Retail, Motor)", "size": 15.5 },
    { "sector": "Transport and Communication", "size": 10.9 },
    { "sector": "Finance, real estate and business services", "size": 27.9 } ],
  "2010": [
    { "sector": "Agriculture", "size": 4.2 },
    { "sector": "Mining and Quarrying", "size": 0.3 },
    { "sector": "Manufacturing", "size": 16.2 },
    { "sector": "Electricity and Water", "size": 2.2 },
    { "sector": "Construction", "size": 4.3 },
    { "sector": "Trade (Wholesale, Retail, Motor)", "size": 15.7 },
    { "sector": "Transport and Communication", "size": 10.2 },
    { "sector": "Finance, real estate and business services", "size": 28.8 } ],
  "2011": [
    { "sector": "Agriculture", "size": 4.1 },
    { "sector": "Mining and Quarrying", "size": 0.3 },
    { "sector": "Manufacturing", "size": 14.9 },
    { "sector": "Electricity and Water", "size": 2.3 },
    { "sector": "Construction", "size": 5 },
    { "sector": "Trade (Wholesale, Retail, Motor)", "size": 17.3 },
    { "sector": "Transport and Communication", "size": 10.2 },
    { "sector": "Finance, real estate and business services", "size": 27.2 } ],
  "2012": [
    { "sector": "Agriculture", "size": 3.8 },
    { "sector": "Mining and Quarrying", "size": 0.3 },
    { "sector": "Manufacturing", "size": 14.9 },
    { "sector": "Electricity and Water", "size": 2.6 },
    { "sector": "Construction", "size": 5.1 },
    { "sector": "Trade (Wholesale, Retail, Motor)", "size": 15.8 },
    { "sector": "Transport and Communication", "size": 10.7 },
    { "sector": "Finance, real estate and business services", "size": 28 } ],
  "2013": [
    { "sector": "Agriculture", "size": 3.7 },
    { "sector": "Mining and Quarrying", "size": 0.2 },
    { "sector": "Manufacturing", "size": 14.9 },
    { "sector": "Electricity and Water", "size": 2.7 },
    { "sector": "Construction", "size": 5.7 },
    { "sector": "Trade (Wholesale, Retail, Motor)", "size": 16.5 },
    { "sector": "Transport and Communication", "size": 10.5 },
    { "sector": "Finance, real estate and business services", "size": 26.6 } ],
  "2014": [
    { "sector": "Agriculture", "size": 3.9 },
    { "sector": "Mining and Quarrying", "size": 0.2 },
    { "sector": "Manufacturing", "size": 14.5 },
    { "sector": "Electricity and Water", "size": 2.7 },
    { "sector": "Construction", "size": 5.6 },
    { "sector": "Trade (Wholesale, Retail, Motor)", "size": 16.6 },
    { "sector": "Transport and Communication", "size": 10.5 },
    { "sector": "Finance, real estate and business services", "size": 26.5 } ]
};


/**
 * Create the chart
 */
var currentYear = 1995;
var chart = AmCharts.makeChart( "chartdiv", {
  "type": "pie",
  "theme": "light",
  "dataProvider": [],
  "valueField": "size",
  "titleField": "sector",
  "startDuration": 0,
  "innerRadius": 80,
  "pullOutRadius": 20,
  "marginTop": 30,
  "titles": [{
    "text": "South African Economy"
  }],
  "allLabels": [{
    "y": "54%",
    "align": "center",
    "size": 25,
    "bold": true,
    "text": "1995",
    "color": "#555"
  }, {
    "y": "49%",
    "align": "center",
    "size": 15,
    "text": "Year",
    "color": "#555"
  }],
  "listeners": [ {
    "event": "init",
    "method": function( e ) {
      var chart = e.chart;

      function getCurrentData() {
        var data = chartData[currentYear];
        currentYear++;
        if (currentYear > 2014)
          currentYear = 1995;
        return data;
      }

      function loop() {
        chart.allLabels[0].text = currentYear;
        var data = getCurrentData();
        chart.animateData( data, {
          duration: 1000,
          complete: function() {
            setTimeout( loop, 3000 );
          }
        } );
      }

      loop();
    }
  } ],
   "export": {
   "enabled": true
  }
} );

}
答案

您的配置有一些错误。

你的animate插件的paths定义需要指向没有.js扩展名的文件：

  paths: {
    // ...
    "amcharts.plugins.animate":
      "https://www.amcharts.com/lib/3/plugins/animate/animate.min"
  },

你的shim需要使用与路径相同的引用。当你的路径被设置为amcharts.animate时，你正在使用amcharts.plugin.animate。他们需要匹配：

"amcharts.plugins.animate": {
  deps: ["amcharts"],
  exports: "AmCharts",
  init: function() {
    AmCharts.isReady = true;
  }
},

最后，您需要在requirejs调用中实际包含插件：

requirejs(['amcharts.pie', 'amcharts.plugins.animate'],
  function() {
    buildChart();
  }
);

Updated codepen

以上是关于如何使用RequireJS制作amcharts animate插件？的主要内容，如果未能解决你的问题，请参考以下文章

如何使用 amchart 添加多条曲线取决于您的独特数据

在 Visual Studio 2013-2015 中制作 requireJS 智能感知

数据未在 amcharts 中正确显示

amCharts - 我如何使用非英语日历

如何在 amcharts 图例中应用水平对齐？

当我在 amcharts 中选择一个部分时，如何获得准确的范围值？