我正在使用 highchart,并且想要使用选择列表来加载主题。主题是.js
文件。我想实现这样的事情:
<select id="theme">
<option value="">Default</option>
<option value="js/theme/theme1.js">theme1</option>
<option value="js/theme/theme2.js">theme2</option>
</select>
换句话说,我怎样才能改变src=""
<script></script>
的标签在我的 html 头部使用选择框!!
谢谢!!
最佳答案
如果您想为用户提供不同主题的选项,您需要在 html 中包含所有 highchart 主题 js 脚本。所有 highcharts 主题 js 文件都执行此操作:
Highcharts.theme = {
colors: ["#DDDF0D", "#55BF3B", "#DF5353", "#7798BF", "#aaeeee", "#ff0066", "#eeaaee",
"#55BF3B", "#DF5353", "#7798BF", "#aaeeee"],....
....
var highchartsOptions = Highcharts.setOptions(Highcharts.theme);
因此,当您包含 js 文件时,它会更改 highcharts 的主题。
您可以编辑这些主题 js 文件并将设置名称更改为 Highcharts.themeDarkBlue = { .....
, Highcharts.themeLightBlue = { .....
等。然后,当您的用户从下拉列表中进行选择时,您需要调用用户选择的任何主题
Highcharts.setOptions(Highcharts.themeDarkBlue);
并重新填充图表。
更新:
无法真正为此生成 fiddle :
您的 HTML:
.....
<script src='themes/themeDarkBlue.js'></script>
<script src='themes/themeLightBlue.js'></script>
<script src='themes/themeBlack.js'></script>
.... //more theme references
在您的themes
文件夹中,您有三个js文件,themeDarkBlue.js、themeLightBlue.js和themeBlack.js
您的主题DarkBlue.js 内容:
var darkBlueTheme = {colors: ["#DDDF0D", "#55BF3B", "#DF5353", "#7798B"....};
您的 themeLightBlue.js 内容:
var lightBlueTheme = {colors: ["#xxxF0D", "#xxxF3B", "#DF5353", "#7798B"....};
在你的 html 中:
$("#themeDropDown").change(function(){
if ($(this).val() = 'Dark Blue'){
Hightcharts.setOptions(darkBlueTheme);
}
else if ($(this).val() = 'Light Blue'){
Hightcharts.setOptions(lightBlueTheme);
}
//else if 'Black'
repopulateHighChart();
});
这应该足够清楚了。
关于javascript - 选择框(下拉列表)加载主题脚本,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26379032/