Highcharts Not Displaying AreaRange в легенде

Question

Я не могу получить Highcharts для отображения моей серии ararange в легенде для графика. У меня есть jsFiddle здесь: http://jsfiddle.net/0eaj4ceu/, который показывает проблему. Он отображает только одну строку в легенде, в то время как серия Arearange не показана. Есть идеи?

код ниже:

HTML:

<script src="http://code.highcharts.com/highcharts.js"></script> 
<script src="http://code.highcharts.com/highcharts-more.js"></script> 
<script src="http://code.highcharts.com/modules/exporting.js"></script> 

<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div> 

JS:

$(document).ready(function() { 
initChart(); 
}); 

function initChart() { 

var wide_ranges = [ 
    [2014, 55488, 55503], 
    [2015, 55857, 55981], 
    [2016, 56142, 56325], 
    [2017, 56272, 56514], 
    [2018, 56319, 56654], 
    [2019, 56235, 56669], 
    [2020, 56042, 56610], 
    [2021, 55745, 56349], 
    [2022, 55469, 56168], 
    [2023, 55088, 55794], 
    [2024, 54746, 55453], 
    [2025, 54197, 55140], 
    [2026, 53844, 54727], 
    [2027, 53305, 54351], 
    [2028, 52839, 53921], 
    [2029, 52322, 53387], 
    [2030, 51568, 52991], 
    [2031, 50944, 52391], 
    [2032, 50152, 51907], 
    [2033, 49466, 51528], 
    [2034, 48756, 51133] 
], 
    medium_ranges = [ 
     [2014, 55491, 55499], 
     [2015, 55886, 55954], 
     [2016, 56185, 56275], 
     [2017, 56328, 56448], 
     [2018, 56390, 56548], 
     [2019, 56368, 56574], 
     [2020, 56223, 56473], 
     [2021, 55968, 56248], 
     [2022, 55614, 55962], 
     [2023, 55281, 55689], 
     [2024, 54868, 55303], 
     [2025, 54487, 54987], 
     [2026, 54040, 54566], 
     [2027, 53519, 54131], 
     [2028, 53012, 53742], 
     [2029, 52466, 53175], 
     [2030, 51884, 52762], 
     [2031, 51274, 52117], 
     [2032, 50601, 51560], 
     [2033, 49898, 50952], 
     [2034, 49143, 50377] 
    ], 
    narrow_ranges = [ 
     [2014, 55493, 55495], 
     [2015, 55911, 55934], 
     [2016, 56209, 56246], 
     [2017, 56371, 56410], 
     [2018, 56445, 56500], 
     [2019, 56435, 56488], 
     [2020, 56304, 56367], 
     [2021, 56055, 56143], 
     [2022, 55726, 55838], 
     [2023, 55395, 55507], 
     [2024, 55033, 55141], 
     [2025, 54633, 54796], 
     [2026, 54195, 54409], 
     [2027, 53783, 53960], 
     [2028, 53264, 53452], 
     [2029, 52764, 53000], 
     [2030, 52146, 52420], 
     [2031, 51550, 51849], 
     [2032, 50952, 51245], 
     [2033, 50249, 50645], 
     [2034, 49601, 50067] 
    ], 
    projection = [ 
     [2014, 55493], 
     [2015, 56074], 
     [2016, 56556], 
     [2017, 56806], 
     [2018, 56943], 
     [2019, 56961], 
     [2020, 56887], 
     [2021, 56743], 
     [2022, 56571], 
     [2023, 56414], 
     [2024, 56275], 
     [2025, 56082], 
     [2026, 55881], 
     [2027, 55627], 
     [2028, 55459], 
     [2029, 55217], 
     [2030, 54969], 
     [2031, 54638], 
     [2032, 54350], 
     [2033, 53994], 
     [2034, 53566] 
    ]; 


$('#container').highcharts({ 
    title: { 
     text: " " 
    }, 
    xAxis: { 
     title: { 
      text: "Years" 
     } 
    }, 
    yAxis: { 
     title: { 
      text: "Inventory" 
     }, 
     min: 46071-1000, 
     max: 58098-1000 
    }, 
    tooltip: { 
     crosshairs: true, 
     shared: true, 
     valueSuffix: ' Inventory' 
    }, 
    legend: { 
     title: { 
      text: 'Probabilities' 
     } 
    }, 
    series: [{ 
     name: 'Inventory', 
     data: projection, 
     zIndex: 3, 
     marker: { 
      fillColor: 'white', 
      lineWidth: 2, 
      lineColor: '#009933' 
     } 
    }, { 
     name: '25% probability', 
     data: medium_ranges, 
     type: 'arearange', 
     lineWidth: 1, 
     linkedTo: ':previous', 
     color: '#5DA5DA', 
     fillOpacity: 0.8, 
     zIndex: 1 
    }, { 
     name: '10% probability', 
     data: wide_ranges, 
     type: 'arearange', 
     lineWidth: 1, 
     linkedTo: ':previous', 
     color: '#F15854', 
     fillOpacity: 0.8, 
     zIndex: 0 
    }, { 
     name: '30% probability', 
     data: narrow_ranges, 
     type: 'arearange', 
     lineWidth: 1, 
     linkedTo: ':previous', 
     color: '#60BD68', 
     fillOpacity: 0.8, 
     zIndex: 2 
    }] 
}); 
} 

Answer 1

Причина вы используете «linkedTo:. Из которых только одна легенда видна Согласно Highcharts API:

Когда две серии связаны друг с другом, e появляется в легенде. Переключение видимости этого также переключает связанную серию.

See your updated fiddle here

// linkedTo: ':previous', 

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