Серия Mulitple Highmaps не видна без отключения

Question

У меня есть 2 серии, как вы можете видеть ниже.

<script src="https://code.highcharts.com/maps/highmaps.js"></script> 
<script src="https://code.highcharts.com/maps/modules/exporting.js"></script> 
<script src="https://code.highcharts.com/mapdata/countries/tr/tr-all.js"></script> 

<div id="container"></div> 


$(function() { 

    Highcharts.mapChart('container', { 
     chart: { 
      spacingBottom: 20 
     }, 
     title: { 
      text: 'Multiple Map Series' 
     }, 

     legend: { 
      enabled: true 
     }, 

     plotOptions: { 
      map: { 
       allAreas: true, 
       // joinBy: 'code', 
       mapData: Highcharts.maps['countries/tr/tr-all'], 
       tooltip: { 
        headerFormat: '', 
        pointFormat: '{series.name}-{point.name}: <b>{point.value}</b>' 
       } 

      } 
     }, 

     series: [{ 
      name: 'AAA', 
      data: $.map(['tr-an','tr-iz'], function (code) { 
       return { "hc-key": code , value : 150}; 
      }) 
     }, 
     { 
      name: 'BBB', 
      data: $.map(['tr-ib','tr-or'], function (code) { 
       return { "hc-key": code , value : 122}; 
      }) 
     } 
     ] 
    }); 
}); 

jsfiddle находится здесь; http://jsfiddle.net/usrt1Lrr/5/

первая серия (AAA) содержит 2 города 'tr-an' и 'tr-iz'.

Вторая серия (BBB) ​​содержит 2 города 'tr-ib' и 'tr-or'.

2 ряда невозможно увидеть, если я не отключу один через легенду. Если вы отключите серию BBB; AAA будет виден. Это бессмысленно.

Как я могу решить эту проблему? Все серии должны рассматриваться вместе

Заранее спасибо.

Answer 1

Поскольку у вас есть plotOptions.map.allAreas: true, он рисует все области для обеих серий, что означает, что серия нарисована поверх каждого из них (скрывая цвет ряда ниже).

Альтернативный путь будет иметь свои варианты:

plotOptions: { 
    map: { 
     allAreas: false, 
     // ... 
    } 
} 

И добавив серию «фон», который вы скрыть, как это:

series: [{ 
     allAreas: true, // only show all areas for this series (as a "background") 
     showInLegend: false // hide it from the legend 
    }, 
    { 
     name: 'AAA', 
     data: $.map(['tr-an','tr-iz'], function (code) { 
      return { "hc-key": code , value : 150}; 
     }) 
    }, 
    { 
     name: 'BBB', 
     data: $.map(['tr-ib','tr-or'], function (code) { 
      return { "hc-key": code , value : 122}; 
     }) 
    }] 

См this JSFiddle demonstration его в действии.