正在加载'主题'和'导出'使用Requirejs的Highcharts模块
Loading 'theme' and 'exporting' module with Highcharts using Requirejs
我在requirejs.config函数中尝试了几种不同的路径和填充程序属性配置,但似乎没有一种能加载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和exporting.js分解到它们自己的路径中,并将它们作为deps添加到highcharts填充程序中,因为它们依赖于highcharts。
我正在考虑将路径中的"highcharts"快捷方式指向exporting.js,并将gray.js和highcharts.js作为其deps,但这似乎有点令人困惑。如下所示。想法?
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>
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( ...
也许稍微简单一点:
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']
}
}
});
我最终实现了以下解决方案@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模块不会运行
- 如何在生产环境中动态加载多个优化的requirejs模块
- browserify/requirejs模块和ES6模块有什么区别
- 我可以将RequireJs模块和require.js本身组合成一个js包吗
- requirejs 模块的许多新实例
- 如何在单元测试之间重置 requireJS 模块
- 将 requirejs 模块与构建脚本连接起来
- 为什么基金会似乎垃圾了RequireJS模块
- RequireJS:模块函数是每次导入模块时执行还是第一次执行
- 在 RequireJs 模块中强调 Js mixins
- 重新定义一个RequireJS模块 - 这是可能的吗
- 使用数据绑定(KNOCKOUT.js)加载requirejs模块
- 使 requirejs 模块符合 AMD 标准
- 包括外部 requirejs 模块
- 单元测试有状态 RequireJS 模块的模式
- 从 HTML 元素(如 onclick 处理程序)调用 RequireJs 模块中的方法
- requireJS 模块别名/重新映射
- 确保在 r.js 优化的应用中调用 RequireJS 模块
- 访问RequireJS模块的私有函数
- 减少RequireJS模块之间的代码重复