Почему тема Highcharts не работает?

Question

Я стараюсь, чтобы темы работали над моими диаграммами, и я терплю неудачу. У меня есть этот jsfiddle, который демонстрирует проблему. Похоже, что некоторые стили применяются (например, цвет кнопок меняется), но некоторые другие не используют (например, цвет фона).

Highcharts.darkgreen = { 
    colors: ['#DDDF0D', '#55BF3B', '#DF5353', '#7798BF', '#aaeeee', '#ff0066', '#eeaaee', 
     '#55BF3B', '#DF5353', '#7798BF', '#aaeeee' 
    ], 
    chart: { 
     backgroundColor: { 
      linearGradient: [0, 0, 250, 500], 
      stops: [ 
       [0, 'rgb(48, 96, 48)'], 
       [1, 'rgb(0, 0, 0)'] 
      ] 
     }, 
     borderColor: '#000000', 
     borderWidth: 2, 
     className: 'dark-container', 
     plotBackgroundColor: 'rgba(255, 255, 255, .1)', 
     plotBorderColor: '#CCCCCC', 
     plotBorderWidth: 1 
    }, 
    title: { 
     style: { 
      color: '#C0C0C0', 
      font: 'bold 16px "Trebuchet MS", Verdana, sans-serif' 
     } 
    }, 
    subtitle: { 
     style: { 
      color: '#666666', 
      font: 'bold 12px "Trebuchet MS", Verdana, sans-serif' 
     } 
    }, 
    xAxis: { 
     gridLineColor: '#333333', 
     gridLineWidth: 1, 
     labels: { 
      style: { 
       color: '#A0A0A0' 
      } 
     }, 
     lineColor: '#A0A0A0', 
     tickColor: '#A0A0A0', 
     title: { 
      style: { 
       color: '#CCC', 
       fontWeight: 'bold', 
       fontSize: '12px', 
       fontFamily: 'Trebuchet MS, Verdana, sans-serif' 

      } 
     } 
    }, 
    yAxis: { 
     gridLineColor: '#333333', 
     labels: { 
      style: { 
       color: '#A0A0A0' 
      } 
     }, 
     lineColor: '#A0A0A0', 
     minorTickInterval: null, 
     tickColor: '#A0A0A0', 
     tickWidth: 1, 
     title: { 
      style: { 
       color: '#CCC', 
       fontWeight: 'bold', 
       fontSize: '12px', 
       fontFamily: 'Trebuchet MS, Verdana, sans-serif' 
      } 
     } 
    }, 
    tooltip: { 
     backgroundColor: 'rgba(0, 0, 0, 0.75)', 
     style: { 
      color: '#F0F0F0' 
     } 
    }, 
    toolbar: { 
     itemStyle: { 
      color: 'silver' 
     } 
    }, 
    plotOptions: { 
     line: { 
      dataLabels: { 
       color: '#CCC' 
      }, 
      marker: { 
       lineColor: '#333' 
      } 
     }, 
     spline: { 
      marker: { 
       lineColor: '#333' 
      } 
     }, 
     scatter: { 
      marker: { 
       lineColor: '#333' 
      } 
     }, 
     candlestick: { 
      lineColor: 'white' 
     } 
    }, 
    legend: { 
     itemStyle: { 
      font: '9pt Trebuchet MS, Verdana, sans-serif', 
      color: '#A0A0A0' 
     }, 
     itemHoverStyle: { 
      color: '#FFF' 
     }, 
     itemHiddenStyle: { 
      color: '#444' 
     } 
    }, 
    credits: { 
     style: { 
      color: '#666' 
     } 
    }, 
    labels: { 
     style: { 
      color: '#CCC' 
     } 
    }, 


    navigation: { 
     buttonOptions: { 
      symbolStroke: '#DDDDDD', 
      hoverSymbolStroke: '#FFFFFF', 
      theme: { 
       fill: { 
        linearGradient: { 
         x1: 0, 
         y1: 0, 
         x2: 0, 
         y2: 1 
        }, 
        stops: [ 
         [0.4, '#606060'], 
         [0.6, '#333333'] 
        ] 
       }, 
       stroke: '#000000' 
      } 
     } 
    }, 

    // scroll charts 
    rangeSelector: { 
     buttonTheme: { 
      fill: { 
       linearGradient: { 
        x1: 0, 
        y1: 0, 
        x2: 0, 
        y2: 1 
       }, 
       stops: [ 
        [0.4, '#888'], 
        [0.6, '#555'] 
       ] 
      }, 
      stroke: '#000000', 
      style: { 
       color: '#CCC', 
       fontWeight: 'bold' 
      }, 
      states: { 
       hover: { 
        fill: { 
         linearGradient: { 
          x1: 0, 
          y1: 0, 
          x2: 0, 
          y2: 1 
         }, 
         stops: [ 
          [0.4, '#BBB'], 
          [0.6, '#888'] 
         ] 
        }, 
        stroke: '#000000', 
        style: { 
         color: 'white' 
        } 
       }, 
       select: { 
        fill: { 
         linearGradient: { 
          x1: 0, 
          y1: 0, 
          x2: 0, 
          y2: 1 
         }, 
         stops: [ 
          [0.1, '#000'], 
          [0.3, '#333'] 
         ] 
        }, 
        stroke: '#000000', 
        style: { 
         color: 'yellow' 
        } 
       } 
      } 
     }, 
     inputStyle: { 
      backgroundColor: '#333', 
      color: 'silver' 
     }, 
     labelStyle: { 
      color: 'silver' 
     } 
    }, 

    navigator: { 
     handles: { 
      backgroundColor: '#666', 
      borderColor: '#AAA' 
     }, 
     outlineColor: '#CCC', 
     maskFill: 'rgba(16, 16, 16, 0.5)', 
     series: { 
      color: '#7798BF', 
      lineColor: '#A6C7ED' 
     } 
    }, 

    scrollbar: { 
     barBackgroundColor: { 
      linearGradient: { 
       x1: 0, 
       y1: 0, 
       x2: 0, 
       y2: 1 
      }, 
      stops: [ 
       [0.4, '#888'], 
       [0.6, '#555'] 
      ] 
     }, 
     barBorderColor: '#CCC', 
     buttonArrowColor: '#CCC', 
     buttonBackgroundColor: { 
      linearGradient: { 
       x1: 0, 
       y1: 0, 
       x2: 0, 
       y2: 1 
      }, 
      stops: [ 
       [0.4, '#888'], 
       [0.6, '#555'] 
      ] 
     }, 
     buttonBorderColor: '#CCC', 
     rifleColor: '#FFF', 
     trackBackgroundColor: { 
      linearGradient: { 
       x1: 0, 
       y1: 0, 
       x2: 0, 
       y2: 1 
      }, 
      stops: [ 
       [0, '#000'], 
       [1, '#333'] 
      ] 
     }, 
     trackBorderColor: '#666' 
    }, 

    // special colors for some of the 
    legendBackgroundColor: 'rgba(0, 0, 0, 0.5)', 
    background2: 'rgb(35, 35, 70)', 
    dataLabelsColor: '#444', 
    textColor: '#C0C0C0', 
    maskColor: 'rgba(255,255,255,0.3)' 
} 

;; 

Highcharts.setOptions(Highcharts.darkgreen);; 
new Highcharts.stockChart({ 
    "exporting": { 
     "enabled": true 
    }, 
    "chart": { 
     "renderTo": "researchChartComponentChartContainer381896448", 
     "backgroundColor": "#fff", 
     "zoomType": "xy" 
    }, 
    "title": { 
     "text": "" 
    }, 
    "rangeSelector": { 
     "inputEnabled": true, 
     "buttons": 

      [{ 
      type: 'day', 
      count: 1, 
      text: '1d' 
     }, { 
      type: 'day', 
      count: 5, 
      text: '5d' 
     }, { 
      type: 'month', 
      count: 1, 
      text: '1m' 
     }, { 
      type: 'month', 
      count: 3, 
      text: '3m' 
     }, { 
      type: 'month', 
      count: 6, 
      text: '6m' 
     }, { 
      type: 'ytd', 
      text: 'YTD' 
     }, { 
      type: 'year', 
      count: 1, 
      text: '1y' 
     }, { 
      type: 'year', 
      count: 2, 
      text: '2y' 
     }, { 
      type: 'year', 
      count: 3, 
      text: '3y' 
     }, { 
      type: 'year', 
      count: 4, 
      text: '4y' 
     }, { 
      type: 'year', 
      count: 5, 
      text: '5y' 
     }, { 
      type: 'year', 
      count: 8, 
      text: '8y' 
     }, { 
      type: 'all', 
      text: 'All' 
     }] 



     , 
     "selected": 12 
    }, 
    "scrollbar": { 
     "liveRedraw": false 
    }, 
    "tooltip": { 
     "valueDecimals": 2, 
     "shared": false 
    }, 
    "series": [{ 
     "marker": { 
      "enabled": true 
     }, 
     "yAxis": 0, 
     "name": "Common Net Income", 
     "index": 0, 
     "type": "line" 
    }], 
    "credits": { 
     "text": "Debris Publishing Inc. ", 
     "href": "www.debrispublishing.com" 
    }, 
    "xAxis": { 
     "title": { 
      "text": "Time" 
     }, 
     "type": "datetime" 
    }, 
    "plotOptions": { 
     "series": { 
      "marker": { 
       "enabled": false, 
       "states": { 
        "hover": { 
         "enabled": true 
        } 
       }, 
       "radius": 4 
      }, 
      "animation": false 
     } 
    }, 
    "yAxis": [{ 
     "title": { 
      "text": "Millions" 
     }, 
     "opposite": false, 
     "labels": { 
      "format": "{value}" 
     }, 
     "height": "100%" 
    }, { 
     "title": { 
      "text": "Price" 
     }, 
     "opposite": true, 
     "labels": { 
      "format": "{value}" 
     }, 
     "height": "100%" 
    }], 
    "navigator": { 
     "adaptToUpdatedData": false 
    }, 
    "legend": { 
     "enabled": true, 
     "floating": false 
    } 
}); 
var chart = $('#researchChartComponentChartContainer381896448').highcharts(); 
chart.showLoading('Loading data from server...');; 
$.getJSON('https://www.highcharts.com/samples/data/jsonp.php?filename=aapl-c.json&callback=?', function (data) { 
    var chart = $('#researchChartComponentChartContainer381896448').highcharts(); 



    chart.series[0].setData(data, false); 
    chart.redraw(); 
    chart.hideLoading(); 
}) 

Любая идея, что может быть неправильным?

Answer 1

Вы отменяете свою тему при создании экземпляра диаграммы.

Ваша тема есть:

Highcharts.darkgreen = { 
    chart: { 
     backgroundColor: { 
      linearGradient: [0, 0, 250, 500], 
      stops: [ 
       [0, 'rgb(48, 96, 48)'], 
       [1, 'rgb(0, 0, 0)'] 
      ] 
     } 
    }, 
    // ... 
}; 

Затем вы создаете диаграмму:

new Highcharts.stockChart({ 
    "chart": { 
     "backgroundColor": "#fff" 
    }, 
    // ... 
}); 

Тогда #fff подменяет ваш объект линейный градиент. Последнее определенное значение сохраняется.

См. this updated JSFiddle, где я удалил #fff, чтобы показать градиент.