Question

我正在使用高图，并希望使用选择列表来加载主题。主题是.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>

换句话说，如何使用选择框更改html头部src=""的{{1}}标记!!

谢谢!!

Answer 1

如果您想为用户提供不同主题的选项，则需要在html中包含所有高图主题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文件，themeDarkBlue.js，themeLightBlue.js和themeBlack.js

您的themeDarkBlue.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();
});

这应该足够清楚了。

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

1 个答案: