Art Karte der highchart durch Parameter

Question

Ich baute eine Karte, die die Bibliothek highcharts mit

$('#container').highcharts('Map', { 

     series : [ 
      { 
       mapData:  Highcharts.maps['custom/world'], 
       joinBy:   ['iso-a2', 'code'],  
      }, 
      { 
       type:   'mapbubble', 
       color:   '#ff0000', 
       minSize:  4, 
       maxSize:  '1.5%', 
       data:   dateObjects, 
      }, 
     ] 
    }); 

Die Daten, die auf der Karte angezeigt wird, hat die Form

var dateObjects = [ 
     { 
      lat:   3.583333, 
      lon:   36.116667, 
      z:    1, 

      myplace:  1, 
     }, 
     { 
      lat:   -3.2249088, 
      lon:   35.1895657, 
      z:    1, 

      myplace:  2, 
     }, 
     { 
      lat:   45.4693488, 
      lon:   10.2636496, 
      z:    1, 

      myplace:  3, 
     }, 
]; 

Sag mir, wie dynamisch nur angezeigt werden diejenigen Daten, die den Myplace-Parameter erfüllen?

Zum Beispiel möchte ich nur die Punkte auf der Karte mit myplace = 1 anzeigen und dann (zum Beispiel der Benutzer hat den Knopf auf der Seite angeklickt) die Punkte auf der Karte, für die myplace = 1, myplace = 3

Answer 1

Mit Series.setData aktualisiere ich die Seriendaten.

Fiddle Demo

JS

var dateObjects = [ 
     { 
      lat:   3.583333, 
      lon:   36.116667, 
      z:    1, 

      myplace:  1, 
     }, 
     { 
      lat:   -3.2249088, 
      lon:   35.1895657, 
      z:    1, 

      myplace:  2, 
     }, 
     { 
      lat:   45.4693488, 
      lon:   10.2636496, 
      z:    1, 

      myplace:  3, 
     }, 
]; 

var mapChart=new Highcharts.mapChart('container', { 
     chart: { 
      borderWidth: 1, 
      map: 'custom/world' 
     }, 

     title: { 
      text: 'World population 2013 by country' 
     }, 

     subtitle: { 
      text: 'Demo of Highcharts map with bubbles' 
     }, 

     legend: { 
      enabled: false 
     }, 

     mapNavigation: { 
      enabled: true, 
      buttonOptions: { 
       verticalAlign: 'bottom' 
      } 
     }, 

     series : [ 
      { 
       mapData:  Highcharts.maps['custom/world'], 
       joinBy:   ['iso-a2', 'code'],  
      }, 
      { 
       type:   'mapbubble', 
       color:   '#ff0000', 
       minSize:  4, 
       maxSize:  '1.5%', 
       data:   dateObjects, 
      }, 
     ] 
    }); 
$('button').click(function() { 
var places=$(this).attr('mplace') 
var result = dateObjects.filter(function(obj) { 
    return obj.myplace == places; 
}); 
    mapChart.series[1].setData(result); 
}); 

Html

<button id="button1" class="autocompare" mplace="1">My Place 
1</button> 
<button id="button2" class="autocompare" mplace="2">My Place 2</button> 
<button id="button3" class="autocompare" mplace="3">My Place 3</button> 
<div id="container" style="height: 500px; min-width: 310px; max-width: 800px; margin: 0 auto"></div>