[英]Loading 'theme' and 'exporting' module with Highcharts using Requirejs
我在我的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>
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
}
}
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.