Question

我使用库highcharts构建了一个地图

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

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

地图上显示的数据格式为

    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,
        },
];

告诉我如何动态显示那些满足myplace参数的数据？

例如，我想在某一点上只显示myplace = 1的地图上的那些点，然后（例如，用户点击页面上的按钮）地图上的那些点，myplace = 1 ，myplace = 3

Answer 1

使用Series.setData，我正在更新系列数据。

Fiddle演示

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>

按参数排列的高图的地图

1 个答案: