Loading 'theme' and 'exporting' module with Highcharts using Requirejs
Question
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. 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.
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. 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):
<!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 answers
solution1
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( ...
solution2
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']
}
}
});
solution3
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.
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
}
}
});
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.