Highcharts.js - несколько тем на одной странице?

Question

У меня около 6 диаграмм на одной странице, одна из них должна иметь другую тему из других пяти. У меня есть темы, работающие индивидуально, но вторая инициализированная применяется ко всем диаграммам.

Есть ли способ указать, какую тему использует диаграмма?

Answer 1

После прочтения комментария Рикардо я понял, что мне просто нужно было переместить вызов setOptions() внутри вызова $ (document) .ready.

Значительно упрощенная версия моего кода:

Highcharts.theme1 = { 
    chart: { 
     borderWidth: 0, 
    }, 
}; 

var chart; 
$(document).ready(function() { 

    // Apply the theme 
    var highchartsOptions = Highcharts.setOptions(Highcharts.theme1); 

    // Build the chart 
    chart = new Highcharts.Chart({}); 

}); 

Highcharts.theme2 = { 
    chart: { 
     borderWidth: 5, 
    }, 
}; 

var chart2; 
$(document).ready(function() { 

    // Apply the theme 
    var highchartsOptions = Highcharts.setOptions(Highcharts.theme2); 

    // Build the chart 
    chart = new Highcharts.Chart({}); 

}); 

Answer 2

Лучшая практика в настоящее время было бы объединить в теме с chart options:

chart1 = new Highcharts.Chart(Highcharts.merge(options1, theme1));

var options1 = { 
    // options goes here 
     chart: { 
      renderTo: 'chart1', 
      type: 'bar', 
     }, 
     title: { 
      text: 'Conversions' 
     }, 
}; 

var theme1 = { 
    // themes goes here 
}; 

var chart1 = new Highcharts.Chart(Highcharts.merge(options1, theme1)); 

таким образом, вы можете установить индивидуальные темы для каждого графика, если вам тоже нужно