Highcharts 动态修改主题

Highcharts 动态修改主题

在higncharts的主题教程中主题是通过src的方式来配置的，也就是在绘制前，主题已经确定了，如果我想动态修改主题该如何操作呢？

官方貌似并没有提供切换主题的api接口（我没找到，谁找到了告诉我一下哈）。于是我找了一个笨方法来，不给接口，那么我就搬源码。

比如在绘制的之前是默认主题，点击按钮之后我想切换到dark unica主题。直接把dark unica的源码考出来。配置下，然后重新绘制图表。

 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: '#F0F0F3',
                 style: {
                     fontSize: '13px'
                 }
             },
             marker: {
                 lineColor: '#333'
             }
         },
         boxplot: {
             fillColor: '#505053'
         },
         candlestick: {
             lineColor: 'white'
         },
         errorbar: {
             color: 'white'
         }
     },
     legend: {
         backgroundColor: 'rgba(0, 0, 0, 0.5)',
         itemStyle: {
             color: '#E0E0E3'
         },
         itemHoverStyle: {
             color: '#FFF'
         },
         itemHiddenStyle: {
             color: '#606063'
         },
         title: {
             style: {
                 color: '#C0C0C0'
             }
         }
     },
     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'
     }
 };
 // Apply the theme
Highcharts.setOptions(Highcharts.theme);
chart.destroy();
chart = Highcharts.chart('container', options);

简单粗暴直接销毁destroy旧图表，然后重新绘制。
同理切换其他主题方法一样。
做了一个简答的黑白主题切换效果：