使用Requirejs使用Highcharts加載“主題”和“導出”模塊

Question

我在我的requirejs.config函數中嘗試了幾種不同的路徑和shim屬性配置，但似乎沒有一個加載我的gray.js主題和exporting.js模塊。 目前我有：

requirejs.config({
    baseUrl: 'static/js',
    paths: {
        'jquery' : 'jquery-1.7.2.min',
        'highcharts' : ['HighCharts/highcharts',
                         'HighCharts/themes/gray',
                         'HighCharts/modules/exporting']
    },
    shim: {
        'highcharts': {
            'exports': 'Highcharts',
            'deps': ['jquery']
         }
    }        
});

我究竟做錯了什么？ 我不能將gray.js和export.js分解成自己的路徑，並將它們作為副部門添加到highcharts填充程序中，因為它們依賴highcharts。

我正在考慮使路徑中的“ highcharts”快捷方式指向exporting.js，並使它的gray.js和highcharts.js副詞出現，但這似乎有點令人困惑。 像下面這樣。 思考？

requirejs.config({
    baseUrl: 'static/js',
    paths: {
        'jquery' : 'jquery-1.7.2.min',
        'highcharts' : 'HighCharts/modules/exporting',
        'highcharts-theme': 'HighCharts/themes/gray',
        'highcharts-module': 'HighCharts/highcharts'
    },
    shim: {
        'highcharts-module': {
            'exports': 'Highcharts',
            'deps': ['jquery']
         },
        'highcharts': {
            'deps': ['highcharts-module', 'highcharts-theme']
        }
    }
});

更新：

我的頁面html（縮寫）：

<!DOCTYPE html>
<html lang="en-us" >
   <head>
      <script src="/static/js/require.js" type='text/javascript'></script>
      <script src="/static/js/requirejs.config.js" type='text/javascript'></script>
   </head>
   <body>
      <div id="#myChart"></div>

      <script type="text/javascript"> 
         require(['jquery','domReady', 'highcharts'], function($, domReady, Highcharts){
            domReady(function(){
               //Stuff to draw Chart here
            });
         });
      </script>
   </body>

Answer 1

requirejs.config({
    baseUrl: "scripts/",
    paths: {
        "highcharts": "lib/highcharts-src",
        'highcharts-theme': 'lib/dark-unica'
    },
    shim: {
        jquery: {
            exports: 'jQuery'
        },
        highcharts: {
            deps: ['lib/jquery'],
            exports: 'Highcharts'
        },
        'highcharts-theme': {
            deps: ['highcharts'],
            exports: 'Highcharts'
        }
    }
});

這樣你可以做

define(['highcharts-theme'],function( ...

或者如果您需要它而主題不在某個地方

define(['highcharts'],function( ...

Answer 2

也許稍微簡單一些：

requirejs.config({
    baseUrl: 'static/js',
    paths: {
        'jquery' : 'jquery-1.7.2.min',
        'highcharts' : 'HighCharts/modules/exporting',
    },
    shim: {
        'HighCharts/highcharts': {
            'exports': 'Highcharts',
            'deps': ['jquery']
         },
        'highcharts': {
            'deps': ['HighCharts/highcharts', 'HighCharts/themes/gray']
        }
    }
});

Answer 3

我終於實現了以下解決方案。 @Lyn Headley，您的解決方案不能解決在主題之前需要加載highcharts.js的依賴關系，但是再次感謝您闡明了Paths Fallback語法。

requirejs.config({
    baseUrl: 'static/js',
    paths: {
        'jquery' : 'jquery-1.7.2.min',
        'highcharts' : 'HighCharts/modules/exporting',
        'highcharts-theme': 'HighCharts/themes/gray',
        'highcharts-module': 'HighCharts/highcharts'
    },
    shim: {
        'highcharts-module': {           // This allows users to only import highcharts 
            'exports': 'Highcharts',     //   without theme or exporting module.
            'deps': ['jquery']
         },                                        // Make sure highcharts.js is loaded
        'highcharts-theme': ['highcharts-module'], //   before the theme is.
        'highcharts': {
            'deps': ['highcharts-module', 'highcharts-theme'],
            'exports': 'Highcharts'      // Still gotta make this available
        }
    }
});

使用Requirejs使用Highcharts加載“主題”和“導出”模塊

問題描述

更新：

3 個解決方案

解決方案1
4 2015-01-08 21:46:40

解決方案2
1 2013-05-16 00:13:48

解決方案3
0 2013-05-16 17:56:32

使用Requirejs使用Highcharts加載“主題”和“導出”模塊

問題描述

更新：

3 個解決方案

解決方案1 4 2015-01-08 21:46:40

解決方案2 1 2013-05-16 00:13:48

解決方案3 0 2013-05-16 17:56:32

解決方案1
4 2015-01-08 21:46:40

解決方案2
1 2013-05-16 00:13:48

解決方案3
0 2013-05-16 17:56:32