Modifica di un tema di Highcharts (parzialmente funzionante)

Question

Ho un problema con la modifica del tema per i grafici highcharts. Ho creato un array per contenere tutti i temi e sto cercando di cambiarli tramite un evento selectChange dell'elenco selezionato.

var highcharts_theme = []; 

/* Default theme */ 
highcharts_theme.push({}); 

/* Dark Blue theme */ 
highcharts_theme.push({ 
    colors: ["#DDDF0D", "#55BF3B", "#DF5353", "#7798BF", "#aaeeee", "#ff0066", "#eeaaee", 
     "#55BF3B", "#DF5353", "#7798BF", "#aaeeee"], 
    chart: { 
     backgroundColor: { 
      linearGradient: [0, 0, 250, 500], 
      stops: [ 
       [0, 'rgb(48, 48, 96)'], 
       [1, 'rgb(0, 0, 0)'] 
      ] 
     }, 
.... Shortened for brevity..... 

mio codice per modificare il tema è:

$('#theme-type').selectmenu({ width: 200 }).change(function (e) { 
     var themeIndex = parseInt($('#theme-type').val()); 
     Highcharts.theme = highcharts_theme[themeIndex]; 
     // Apply the theme 
     highchartsOptions = Highcharts.setOptions(Highcharts.theme); 
    }); 

Il problema che sto avendo è che se per esempio posso passare al tema Skies va bene, ma poi passare a qualsiasi altro tema, lo sfondo del cielo rimane insieme ad altri elementi del tema.

Qualcuno sa di un modo corretto per reimpostare completamente il tema?

Grazie

Answer 1

Ogni volta che si imposta un tema, si fonde con il tema già esistente, e quindi qualsiasi opzione che non è presente nel nuovo tema si riprenderà dal tema esistente. Questo potrebbe non essere sempre desiderato.

Sfortunatamente, Highcharts non offre un'opzione per tornare ai valori predefiniti impostati al momento del primo caricamento. Il seguente codice può essere utilizzato per ottenere tale funzionalità

// Make a copy of the defaults, call this line before any other setOptions call 
var HCDefaults = $.extend(true, {}, Highcharts.getOptions(), {}); 

function ResetOptions() { 
    // Fortunately, Highcharts returns the reference to defaultOptions itself 
    // We can manipulate this and delete all the properties 
    var defaultOptions = Highcharts.getOptions(); 
    for (var prop in defaultOptions) { 
     if (typeof defaultOptions[prop] !== 'function') delete defaultOptions[prop]; 
    } 
    // Fall back to the defaults that we captured initially, this resets the theme 
    Highcharts.setOptions(HCDefaults); 
} 

Dopo il ripristino del tema, l'applicazione di un nuovo tema avrebbe funzionato come se questo è il primo tema viene applicata.

Demo @ jsFiddle

Answer 2

Se si rimuovono tutte le opzioni di colore e ricaricare i Highcharts oggetto sarà predefinito al tema di fondo di default. Se imposti il ​​valore sotto a null, non dovrebbe mostrare un'immagine back ground una volta ricaricata.

plotBackgroundImage: null