按参数对 highchart 的地图进行排序
sort of highchart's map by parameters
我使用 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, 我的地方 = 3
使用 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>
我使用 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, 我的地方 = 3
使用 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>