ハイマップ上で2種類の世界地図をオーバーレイする方法

Question

ハイマップ/ハイチャートを初めて使用し、同じ地図上に2種類のデータを表示できるマップアプリケーションを作成しようとしました。 1つはハイライトされた国（赤で表示）のフォームにあり、もう1つは気泡のフォーム（現在は黒で表示）です。私が直面する問題は、最初のシリーズデータ（赤い領域）は私の変数dataに存在する国にすぎませんが、黒いバブルは変数dataの国だけではないようです。

私が追加した以下のhighchartsスクリプト -

<script src="https://code.highcharts.com/maps/highmaps.js"></script> 
<script src="https://code.highcharts.com/mapdata/custom/world.js"></script> 

そして、これは私のスクリプトがどのように見えるかであるように -

function populateChart (data) { 

// Initiate the chart 
chart = $('#container').highcharts('Map', { 

    chart: { 
     // Edit chart spacing 
     spacingBottom: 100, 
     spacingTop: 100 

    }, 

    title: { 
     text: null 
    }, 

    mapNavigation: { 
     enabled: false 
    }, 

    legend: { 
     enabled: false 
    }, 

    tooltip: { 
     formatter: function() { 

      return this.point.name; 
     }, 
     shared: false 
    }, 

    series: [{ 
     type: 'map', 
     data: data, 
     mapData: Highcharts.maps['custom/world'], 
     joinBy: 'hc-key', 
     name: null, 
     color: '#cb202d', 
     states: { 
      hover: { 
       color: '#cb202d', 
       style: { fontFamily: '\'Proxima Nova Extra Condensed\', sans-serif', fontSize: '10px' }, 
      } 
     }, 
     dataLabels: { 
      enabled: false, 
      color: '#FFFFFF', 
      style: { fontFamily: '\'Proxima Nova Extra Condensed\', sans-serif', fontSize: '17px' }, 
      format: '{point.value}' 
     } 
    }, 
    { 
     type: 'mapbubble', 
     name: null, 
     mapData: Highcharts.maps['custom/world'], 
     joinBy: 'hc-key', 
     data: data, 
     minSize: 4, 
     maxSize: '8%', 
     animation: true, 
     color: '#000000' 
    }] 
}); 

};

私はずっと多くのことを研究してきました。誰かが正しい方向で私を指すことができれば感謝します。前もって感謝します。

Answer 1

データは2つのシリーズ間で共有されており、シリーズによって内部的に変更されているようです。それを避ける最良の方法は、データのコピーを使用することです（シリーズごとに1つのコピー）。

series: [{ 
     name: 'Country', 
     joinBy: 'hc-key', 
     color :'red', 
     data: data.slice(), 
     dataLabels: { 
      enabled: true, 
      color: '#FFFFFF', 
      formatter: function() { 
       if (this.point.value) { 
        return this.point.name; 
       } 
      } 
     } 
    }, { 
     type: 'mapbubble', 
     data: data, 
     joinBy: 'hc-key', 
     minSize: 30, 
     maxSize: 40, 
     dataLabels: { 
     enabled: true, 
     format: '{point.name}' 
     } 
    }] 

例：http://jsfiddle.net/1hnqjvqb/1/