requireJS加载amCharts中文教程-控件新闻-慧都网

requireJS加载amCharts中文教程

原创|使用教程|编辑：龚雪|2014-09-03 09:34:06.000|阅读 907 次

概述：现在的网站变得更加复杂，需要加载各种各样的脚本，今天小编教大家使用requireJS加载amCharts，让加载速度更快，轻轻松松解决加载缓慢问题。

#慧都22周年庆大促·界面/图表报表/文档/IDE/IOT/测试等千款热门软控件火热促销中>>

下载amCharts JavaScript Charts

一、文件

按照下面的封层，建立文件

project-directory/

project.html
scripts/
- main.js
- require.js
- amcharts/
  - amcharts.js
  - pie.js
  - ...

HTML代码

代码不多，但是请保证require.js API 和图表容器在project.html文件

<!DOCTYPE html>
<html>
    <head>
        <title>requireJS | amCharts.com</title>
        <script type="text/javascript" data-main="scripts/main" src="scripts/require.js"></script>
    </head>
    <body>
        <div id="chartdiv" style="width: 600px; height: 400px;"></div>
    </body>
</html>

二、设置

RequireJS 需要知道amCharts 的文位置，所以将下面的代码放在main.js中。

// SETUP CONFIG
requirejs.config({

    // Define paths; relative from js folder
    paths: {
        'amcharts'          : '//cdn.amcharts.com/lib/3/amcharts',
        'amcharts.funnel'   : '//cdn.amcharts.com/lib/3/funnel',
        'amcharts.gauge'    : '//cdn.amcharts.com/lib/3/gauge',
        'amcharts.pie'      : '//cdn.amcharts.com/lib/3/pie',
        'amcharts.radar'    : '//cdn.amcharts.com/lib/3/radar',
        'amcharts.serial'   : '//cdn.amcharts.com/lib/3/serial',
        'amcharts.xy'       : '//cdn.amcharts.com/lib/3/xy'
    },

    // Define dependencies
    shim: {
        'amcharts.funnel'   : {
            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;
            }
        }
    } 
});

三、有趣的部分

设置完成后，创建模版，可以参考下面代码

// LOAD DEPENDENCIES; CREATE CHART
require(['amcharts.pie'],function(amRef) {
    var chart = amRef.makeChart("chartdiv", {
        "type": "pie",
        "theme": "none",
        "dataProvider": [
        {
            "country": "Lithuania",
            "litres": 501.9
        }, {
            "country": "Czech Republic",
            "litres": 301.9
        }, {
            "country": "Ireland",
            "litres": 201.1
        }, {
            "country": "Germany",
            "litres": 165.8
        }, {
            "country": "Australia",
            "litres": 139.9
        }, {
            "country": "Austria",
            "litres": 128.3
        }, {
            "country": "UK",
            "litres": 99
        }, {
            "country": "Belgium",
            "litres": 60
        }, {
            "country": "The Netherlands",
            "litres": 50
        }],
        "valueField": "litres",
        "titleField": "country"
    });

// ERROR HANDLER
}, function(err) {
    console.log('Something went wront: ', err);
});