影音先锋在线播放,亚洲精品一二三区,日韩大片中文

requireJS加載amCharts中文教程

原創|使用教程|編輯：龔雪|2014-09-03 09:34:06.000|閱讀 903 次

概述：現在的網站變得更加復雜，需要加載各種各樣的腳本，今天小編教大家使用requireJS加載amCharts，讓加載速度更快，輕輕松松解決加載緩慢問題。

# 界面/圖表報表/文檔/IDE等千款熱門軟控件火熱銷售中 >>

下載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);
});