选择框(下拉列表）以加载主题脚本

select box (dropdown list) to load theme script

本文关键字：加载 脚本 下拉列表 选择      更新时间：2023-09-26

我正在使用highchart，并希望使用一个选择列表来加载主题。主题是CCD_ 1文件。我想获得这样的东西：

<select id="theme">
<option value="">Default</option>
<option value="js/theme/theme1.js">theme1</option>
<option value="js/theme/theme2.js">theme2</option>
</select>

换句话说，我如何使用选择框更改html头部<script></script>的src=""标签！！

谢谢！！

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

并重新填充图表。

更新：

无法真正为此生成小提琴，因此：

您的html:

.....
    <script src='themes/themeDarkBlue.js'></script>
    <script src='themes/themeLightBlue.js'></script>
    <script src='themes/themeBlack.js'></script>
.... //more theme references

在themes文件夹中，您有三个js文件，themeMarkBlue.js、themeLightBlue.js和themeBlack.js

您的主题MarkBlue.js内容：

var darkBlueTheme = {colors: ["#DDDF0D", "#55BF3B", "#DF5353", "#7798B"....};

您的主题LightBlue.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();
});

这应该足够清楚。

相关文章：