javascript - 选择框(下拉列表)加载主题脚本

Question

我正在使用 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 头部使用选择框!!

谢谢!!

Answer 1

如果您想为用户提供不同主题的选项，您需要在 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();
});

这应该足够清楚了。