使用Requirejs使用Highcharts加载“主题”和“导出”模块
[英]Loading 'theme' and 'exporting' module with Highcharts using Requirejs
问题描述
I have tried several different configurations of my paths and shim attributes in my requirejs.config function but none seem to load my gray.js theme and the exporting.js module. 
我在我的requirejs.config函数中尝试了几种不同的路径和shim属性配置，但似乎没有一个加载我的gray.js主题和exporting.js模块。 Currently I have: 目前我有：
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']
}
}
});
What am I doing wrong? 我究竟做错了什么？ I can't break gray.js and exporting.js out into their own paths and add them to the highcharts shim as deps because they rely on highcharts. 我不能将gray.js和export.js分解成自己的路径，并将它们作为副部门添加到highcharts填充程序中，因为它们依赖highcharts。
I am thinking about making the 'highcharts' shortcut in paths point to exporting.js and make gray.js and highcharts.js deps of it, but this seems a little confusing. 我正在考虑使路径中的“ highcharts”快捷方式指向exporting.js，并使它的gray.js和highcharts.js副词出现，但这似乎有点令人困惑。 Like the following. 像下面这样。 Thoughts? 思考？
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']
}
}
});
UPDATE: 更新：
My page html (abbreviated): 我的页面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>
3 个解决方案
解决方案1
4 2015-01-08 21:46:40
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'
}
}
});
this way you can do 这样你可以做
define(['highcharts-theme'],function( ...
or if you need it without the theme somewhere 或者如果您需要它而主题不在某个地方
define(['highcharts'],function( ...
解决方案2
1 2013-05-16 00:13:48
Slightly simpler perhaps: 也许稍微简单一些：
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']
}
}
});
解决方案3
0 2013-05-16 17:56:32
I finally implemented the following solution. 我终于实现了以下解决方案。 @Lyn Headley, your solution doesn't solve the dependency that highcharts.js needs to be loaded before the theme, but thanks again for clarifying the Paths Fallback syntax. @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.