如果对象具有特定值,如何显示数组中的对象?
How to display objects within an array if they have a certain value?
我正在根据对象值在地图上绘制城市。
我需要能够根据它们的值隐藏或显示这些图。
到目前为止,我有以下功能,它将打开或关闭所有城市,以及一个记录城市值 <= 30 的功能。
var mapData = {
'cities': [{"name":"Москва", "latitude":55.752, "longitude":37.615, "value":"10", "color": am4core.color("#ff0000")},
{"name":"Старая Ладога", "latitude":60.0016, "longitude":32.2926, "value":"20", "color":chart.colors.getIndex(1)},
{"name":"Великий Новгород", "latitude":58.33, "longitude":31.16, "value":"30", "color":chart.colors.getIndex(1)},
{"name":"Белозерск", "latitude":60.02, "longitude":37.46, "value":"40", "color":chart.colors.getIndex(2)},
{"name":"Изборск", "latitude":57.7082, "longitude":27.8609, "value":"50", "color":chart.colors.getIndex(3)}
]};
var imageSeries = chart.series.push(new am4maps.MapImageSeries());
imageSeries.data = mapData.cities;
imageSeries.dataFields.value = "value";
var imageTemplate = imageSeries.mapImages.template;
imageTemplate.propertyFields.latitude = "latitude";
imageTemplate.propertyFields.longitude = "longitude";
imageTemplate.nonScaling = true
var circle = imageTemplate.createChild(am4core.Circle);
circle.fillOpacity = 0.7;
circle.propertyFields.fill = "color";
circle.tooltipText = "{name}: [bold]{value}[/]";
imageSeries.heatRules.push({
"target": circle,
"property": "radius",
"min": 4,
"max": 4,
"dataField": "value"
})
function toggleCities() {
var series = imageSeries;
if (series.isHiding || series.isHidden) {
series.show();
}
else {
series.hide();
}
}
我不确定我需要更改什么才能指定只绘制值 <= 30 的城市。
Array.prototype.filter 将是您想要的:
const filteredData = mapData.cities.filter(d => parseInt(d.value) <= 30);
filter
returns 初始数组中元素的数组,return true
从函数传递给 filter()
.
在你的例子中,我认为在 function toggleCities()
你会想要:
imageSeries.data = filteredData;
当您希望 <= 30
应用时,然后
imageSeries.data = mapData.cities;
当你不
我正在根据对象值在地图上绘制城市。
我需要能够根据它们的值隐藏或显示这些图。
到目前为止,我有以下功能,它将打开或关闭所有城市,以及一个记录城市值 <= 30 的功能。
var mapData = {
'cities': [{"name":"Москва", "latitude":55.752, "longitude":37.615, "value":"10", "color": am4core.color("#ff0000")},
{"name":"Старая Ладога", "latitude":60.0016, "longitude":32.2926, "value":"20", "color":chart.colors.getIndex(1)},
{"name":"Великий Новгород", "latitude":58.33, "longitude":31.16, "value":"30", "color":chart.colors.getIndex(1)},
{"name":"Белозерск", "latitude":60.02, "longitude":37.46, "value":"40", "color":chart.colors.getIndex(2)},
{"name":"Изборск", "latitude":57.7082, "longitude":27.8609, "value":"50", "color":chart.colors.getIndex(3)}
]};
var imageSeries = chart.series.push(new am4maps.MapImageSeries());
imageSeries.data = mapData.cities;
imageSeries.dataFields.value = "value";
var imageTemplate = imageSeries.mapImages.template;
imageTemplate.propertyFields.latitude = "latitude";
imageTemplate.propertyFields.longitude = "longitude";
imageTemplate.nonScaling = true
var circle = imageTemplate.createChild(am4core.Circle);
circle.fillOpacity = 0.7;
circle.propertyFields.fill = "color";
circle.tooltipText = "{name}: [bold]{value}[/]";
imageSeries.heatRules.push({
"target": circle,
"property": "radius",
"min": 4,
"max": 4,
"dataField": "value"
})
function toggleCities() {
var series = imageSeries;
if (series.isHiding || series.isHidden) {
series.show();
}
else {
series.hide();
}
}
我不确定我需要更改什么才能指定只绘制值 <= 30 的城市。
Array.prototype.filter 将是您想要的:
const filteredData = mapData.cities.filter(d => parseInt(d.value) <= 30);
filter
returns 初始数组中元素的数组,return true
从函数传递给 filter()
.
在你的例子中,我认为在 function toggleCities()
你会想要:
imageSeries.data = filteredData;
当您希望 <= 30
应用时,然后
imageSeries.data = mapData.cities;
当你不