2016-12-23 6 views
1

私は以下のように2つのシリーズを持っています。Highmaps mulitpleシリーズは無効にすることなく見ることができません

<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/

第1セリエ(AAA)には、2つの都市 'tr-an'と 'tr-iz'が含まれています。

第2セリエ(BBB)には、2つの都市 'tr-ib'と 'tr-or'が含まれています。

2系列は私が凡例経由で無効にしない限り見ることができません。 BBBセリを無効にすると、 AAAが表示されます。それは意味をなさない。

どうすればこの問題を解決できますか?すべてのシリーズを一緒に見なければならない

ありがとうございます。

答えて

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を参照してください。

+0

ありがとう、私の問題を解決しました – user2761286

関連する問題