应用新主题而不重新加载高图中的图表

Question

我可以在不重新加载整个图表的情况下应用主题。我可以在图表代码中推送主题设置吗？在highcharts网站中，所有示例都是基于单一主题的。这是我的代码

$(function() {
            $.getJSON('http://api-sandbox.oanda.com/v1/candles?instrument=EUR_USD&candleFormat=midpoint&granularity=W', function(data) {
        // create the chart
        var onadata =[];
        var yData=[];       
        var type='line';            
        var datalen=data.candles.length;
        var all_points= [];
        var all_str="";

        for(var i=0; i<datalen;i++)
        {
            var each=[Date._parse(data.candles[i].time), data.candles[i].openMid, data.candles[i].highMid, data.candles[i].lowMid, data.candles[i].closeMid]
            onadata.push(each);
            yData.push(data.candles[i].closeMid);
        }

                $( "#change_theme" ).on("change", function() {
                var optionSelected = $("option:selected", this);
                var valueSelected = this.value;

                //alert(valueSelected);
                if(valueSelected=='default.js')
                {
                    location.reload();
                }
                else{                       $.getScript('js/themes/'+valueSelected, function() {
                    //alert('Load was performed.');                                     
                    chart();                                        
                });
                }


            });

        chart();

        function chart()
        {
            $('#container').highcharts('StockChart', {

                    credits: {
                        enabled : 0
                    },

                    rangeSelector : {
                        buttons: [{
                            type: 'month',
                            count: 1,
                            text: '1M'
                        }, {
                            type: 'month',
                            count: 3,
                            text: '3M'
                        },{
                            type: 'month',
                            count: 6,
                            text: '6M'
                        },{
                            type: 'all',
                            text: 'All'
                        }], 
                        selected:3      
                    },

                    legend: {
                        enabled: true,
                        layout: 'vertical',
                        align: 'right',
                        verticalAlign: 'middle',
                        borderWidth: 0
                    },

                    title : {
                        text : 'Stock Price'
                    },

                    xAxis :{
                        minRange : 3600000
                    },

                    yAxis : [{
                          offset: 0,
                          ordinal: false,
                          height:280,


                          labels: {
                            format: '{value:.5f}'
                                }

                     }],

                    chart: {
                        events: {
                            click: function(event) {                                
                                var x1=event.xAxis[0].value;
                                var x2 =this.xAxis[0].toPixels(x1);             
                                var y1=event.yAxis[0].value;
                                var y2 =this.yAxis[0].toPixels(y1);

                                selected_point='['+x1+','+y1+']';                             
                                all_points.push(selected_point);
                                all_str=all_points.toString();                               
                                if(all_points.length>1)
                                {

                                    this.addSeries({                            
                                    type : 'line',
                                    name : 'Trendline',
                                    id: 'trend',    
                                    data: JSON.parse("[" + all_str + "]"),                      
                                    color:'#'+(Math.random()*0xEEEEEE<<0).toString(16),
                                    marker:{enabled:true}
                                    });

                                }

                                if(all_points.length==2)
                                {
                                    all_points=[];
                                }


                            }

                        }       
                    },

                    series : [{
                        //allowPointSelect : true,
                        type : type,
                        name : 'Stock Price',
                        id: 'primary',
                        data : onadata,
                        tooltip: {
                            valueDecimals: 5,
                            crosshairs: true,
                            shared: true
                        },
                        dataGrouping : {

                            units : [
                                [
                                    'hour',
                                    [1, 2, 3, 4, 6, 8, 12]
                                ], [
                                    'day',
                                    [1]
                                ], [
                                    'week',
                                    [1]
                                ], [
                                    'month',
                                    [1, 3, 6]
                                ], [
                                    'year',
                                    [1]
                                ]
                            ]
                        }
                    },
                    ]
                });
        }


    });
});

这是我的js fiddle

请帮忙。提前谢谢。

Answer 1

如果您正在使用支持CSS变量的现代浏览器，则可以这样做。

Highcharts.theme = {
    colors: [
      'var(--color1)',
      'var(--color2)',
      'var(--color3)',
      'var(--color4)',
      'var(--color5)',
      'var(--color6)',
    ]
}

Highcharts.setOptions(Highcharts.theme);

function setTheme(themeName) {
  // remove theme-* classes from body
  removeClasses = Array.from(document.body.classList).filter(s => s.startsWith('theme-'));
  document.body.classList.remove(...removeClasses)

  if (themeName) {
    document.body.classList.add('theme-' + themeName);
  }
}

CSS

body {
  --color1: #e00;
  --color2: #b00;
  --color3: #900;
  --color4: #600;
  --color5: #300;
  --color6: #000;
}

body.theme-dark {
  --color1: #555;
  --color2: #444;
  --color3: #333;
  --color4: #222;
  --color5: #111;
  --color6: #000;
}

body.theme-retro {
  --color1: #0f0;
  --color2: #ff0;
  --color3: #0ff;
  --color4: #0a0;
  --color5: #aa0;
  --color6: #00a;
}

Answer 2

不幸的是，这是不可能的，所以你需要销毁并创建新的图表。