Javascript 更改highscharts（highstock）图表的主题

如果这是非常基本的，我很抱歉，但我不知怎么搞糊涂了：我想在我正在开发的应用程序中添加Highstock/Highcharts图表，但我想使用默认主题以外的主题（我想使用

深色unica

。我看到了，但不知怎么我还是不知道怎么做。有人能告诉我怎么做吗

以下是html代码（来自

examples/compare/

文件夹）：

index.html（来源：）：

Highstock示例
var系列选项=[]，
序列计数器=0，
名称=['MSFT'、'AAPL'、'GOOG']；
/**
*在加载所有数据时创建图表
*@returns{undefined}
*/
函数createChart（）{
Highcharts.stockChart（‘容器’{
范围选择器：{
选定：4
},
亚克斯：{
标签：{
格式化程序：函数（）{
返回（this.value>0？'+'：''）+this.value+'%；
}
},
绘图线：[{
值：0，
宽度：2，
颜色：“银色”
}]
},
打印选项：{
系列：{
比较：'百分比'，
showInNavigator：对
}
},
工具提示：{
pointFormat:“{series.name}:{point.y}（{point.change}%）
”，
数值小数：2，
分裂：对
},
系列：系列选项
});
}
$.each（名称、函数（i、名称）{
$.getJSON（'https://www.highcharts.com/samples/data/jsonp.php?filename=“+name.toLowerCase（）+”-c.json&callback=？”，函数（数据）{
系列选项[i]={
姓名:姓名,，
数据：数据
};
//当我们异步加载数据时，我们不知道数据的到达顺序
//我们保留一个计数器，并在加载所有数据时创建图表。
序列计数器+=1；
if（serieCounter==names.length）{
createChart（）；
}
});
});
//Highcharts.setOptions（Highcharts.dark unica）；//我也有类似的疑问。然后我通过。

我把它放在

Highcharts.图表（..）
segment

下面是主题代码

Highcharts.theme = {
 colors: ['#2b908f', '#90ee7e', '#f45b5b', '#7798BF', '#aaeeee', '#ff0066',
  '#eeaaee', '#55BF3B', '#DF5353', '#7798BF', '#aaeeee'],
 chart: {
  backgroundColor: {
     linearGradient: { x1: 0, y1: 0, x2: 1, y2: 1 },
     stops: [
        [0, '#2a2a2b'],
        [1, '#3e3e40']
     ]
  },
  style: {
     fontFamily: '\'Unica One\', sans-serif'
  },
  plotBorderColor: '#606063'
 },
 title: {
  style: {
     color: '#E0E0E3',
     textTransform: 'uppercase',
     fontSize: '20px'
  }
 },
 subtitle: {
  style: {
     color: '#E0E0E3',
     textTransform: 'uppercase'
  }
},
xAxis: {
  gridLineColor: '#707073',
  labels: {
     style: {
        color: '#E0E0E3'
     }
  },
  lineColor: '#707073',
  minorGridLineColor: '#505053',
  tickColor: '#707073',
  title: {
     style: {
        color: '#A0A0A3'

     }
  }
},
yAxis: {
  gridLineColor: '#707073',
  labels: {
     style: {
        color: '#E0E0E3'
     }
  },
  lineColor: '#707073',
  minorGridLineColor: '#505053',
  tickColor: '#707073',
  tickWidth: 1,
  title: {
     style: {
        color: '#A0A0A3'
     }
  }
},
tooltip: {
  backgroundColor: 'rgba(0, 0, 0, 0.85)',
  style: {
     color: '#F0F0F0'
  }
},
plotOptions: {
  series: {
     dataLabels: {
        color: '#B0B0B3'
     },
     marker: {
        lineColor: '#333'
     }
  },
  boxplot: {
     fillColor: '#505053'
  },
  candlestick: {
     lineColor: 'white'
  },
  errorbar: {
     color: 'white'
  }
},
legend: {
  itemStyle: {
     color: '#E0E0E3'
  },
  itemHoverStyle: {
     color: '#FFF'
  },
  itemHiddenStyle: {
     color: '#606063'
  }
},
credits: {
  style: {
     color: '#666'
  }
},
labels: {
  style: {
     color: '#707073'
  }
},

drilldown: {
  activeAxisLabelStyle: {
     color: '#F0F0F3'
  },
  activeDataLabelStyle: {
     color: '#F0F0F3'
  }
},

navigation: {
  buttonOptions: {
     symbolStroke: '#DDDDDD',
     theme: {
        fill: '#505053'
     }
  }
},

// scroll charts
rangeSelector: {
  buttonTheme: {
     fill: '#505053',
     stroke: '#000000',
     style: {
        color: '#CCC'
     },
     states: {
        hover: {
           fill: '#707073',
           stroke: '#000000',
           style: {
              color: 'white'
           }
        },
        select: {
           fill: '#000003',
           stroke: '#000000',
           style: {
              color: 'white'
           }
        }
     }
  },
  inputBoxBorderColor: '#505053',
  inputStyle: {
     backgroundColor: '#333',
     color: 'silver'
  },
  labelStyle: {
     color: 'silver'
  }
},

navigator: {
  handles: {
     backgroundColor: '#666',
     borderColor: '#AAA'
  },
  outlineColor: '#CCC',
  maskFill: 'rgba(255,255,255,0.1)',
  series: {
     color: '#7798BF',
     lineColor: '#A6C7ED'
  },
  xAxis: {
     gridLineColor: '#505053'
  }
},

scrollbar: {
  barBackgroundColor: '#808083',
  barBorderColor: '#808083',
  buttonArrowColor: '#CCC',
  buttonBackgroundColor: '#606063',
  buttonBorderColor: '#606063',
  rifleColor: '#FFF',
  trackBackgroundColor: '#404043',
  trackBorderColor: '#404043'
},

// special colors for some of the
legendBackgroundColor: 'rgba(0, 0, 0, 0.5)',
background2: '#505053',
dataLabelsColor: '#B0B0B3',
textColor: '#C0C0C0',
contrastTextColor: '#F0F0F3',
maskColor: 'rgba(255,255,255,0.3)'
};

// Apply the theme
Highcharts.setOptions(Highcharts.theme);

在所有Highchart都包含脚本之后，只需在HTML中添加这一行即可

<script src="https://code.highcharts.com/themes/dark-unica.js"></script>



所以它可能看起来像这样

<script src="https://code.highcharts.com/8.0.0/highcharts.js"></script>
<script src="https://code.highcharts.com/8.0.0/highcharts-more.js"></script>
<script src="https://code.highcharts.com/8.0.0/modules/solid-gauge.js"></script>
<script src="https://code.highcharts.com/8.0.0/modules/exporting.js"></script>
<script src="https://code.highcharts.com/8.0.0/modules/data.js"></script>
<script src="https://code.highcharts.com/8.0.0/modules/drilldown.js"></script>
<script src="https://code.highcharts.com/8.0.0/modules/heatmap.js"></script>
<script src="https://code.highcharts.com/8.0.0/modules/treemap.js"></script>
<script src="https://code.highcharts.com/8.0.0/modules/export-data.js"></script>
<script src="https://code.highcharts.com/8.0.0/modules/accessibility.js"></script>
<script src="https://code.highcharts.com/8.0.0/themes/dark-unica.js"></script>



Credit：@Fernanda Ines Duran（在评论中）
Hi@crimp，尝试更改脚本顺序：在导出.js后加载dark-unica.js。您还应该检查文件路径是否正确。如果仍然没有得到结果，请直接从cdn:code.highcharts.com/themes/dark-unica.js加载js
<script src="https://code.highcharts.com/8.0.0/highcharts.js"></script>
<script src="https://code.highcharts.com/8.0.0/highcharts-more.js"></script>
<script src="https://code.highcharts.com/8.0.0/modules/solid-gauge.js"></script>
<script src="https://code.highcharts.com/8.0.0/modules/exporting.js"></script>
<script src="https://code.highcharts.com/8.0.0/modules/data.js"></script>
<script src="https://code.highcharts.com/8.0.0/modules/drilldown.js"></script>
<script src="https://code.highcharts.com/8.0.0/modules/heatmap.js"></script>
<script src="https://code.highcharts.com/8.0.0/modules/treemap.js"></script>
<script src="https://code.highcharts.com/8.0.0/modules/export-data.js"></script>
<script src="https://code.highcharts.com/8.0.0/modules/accessibility.js"></script>
<script src="https://code.highcharts.com/8.0.0/themes/dark-unica.js"></script>