我第一次使用 highcharts 并尝试创建加利福尼亚州的特定县地图。对于前。萨克拉门托县。我能够生成加利福尼亚州县地图，但是当我从下拉列表中更改县时，我只想生成该特定县地图，而不是加利福尼亚州的所有县。是否可以？以下是我迄今为止所编写的代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>California County Map</title>
<!-- Include Highcharts library and modules -->
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/maps/modules/map.js"></script>
<script src="https://code.highcharts.com/mapdata/countries/us/us-ca-all.js"></script>
</head>
<body>
<div id="ca-map" style="height: 600px; min-width: 310px; max-width: 800px; margin: 0 auto;"></div>
<script>
(async () => {
const topology = await fetch(
"https://code.highcharts.com/mapdata/countries/us/us-ca-all.topo.json"
).then(response => response.json());
const data = [
["us-ca-083", 10], ["us-ca-111", 11], ["us-ca-071", 12],
["us-ca-115", 13], ["us-ca-101", 14], ["us-ca-031", 15],
["us-ca-053", 16], ["us-ca-057", 17], ["us-ca-059", 18],
["us-ca-065", 19], ["us-ca-073", 20], ["us-ca-041", 21],
["us-ca-075", 22], ["us-ca-095", 23], ["us-ca-097", 24],
["us-ca-055", 25], ["us-ca-013", 26], ["us-ca-009", 27],
["us-ca-077", 28], ["us-ca-035", 29], ["us-ca-091", 30],
["us-ca-067", 31], ["us-ca-017", 32], ["us-ca-099", 33],
["us-ca-061", 34], ["us-ca-043", 35], ["us-ca-063", 36],
["us-ca-049", 37], ["us-ca-089", 38], ["us-ca-109", 39],
["us-ca-039", 40], ["us-ca-003", 41], ["us-ca-069", 42],
["us-ca-047", 43], ["us-ca-079", 44], ["us-ca-011", 45],
["us-ca-007", 46], ["us-ca-081", 47], ["us-ca-087", 48],
["us-ca-085", 49], ["us-ca-029", 50], ["us-ca-005", 51],
["us-ca-113", 52], ["us-ca-033", 53], ["us-ca-045", 54],
["us-ca-103", 55], ["us-ca-023", 56], ["us-ca-093", 57],
["us-ca-027", 58], ["us-ca-001", 59], ["us-ca-037", 60],
["us-ca-025", 61], ["us-ca-021", 62], ["us-ca-107", 63],
["us-ca-019", 64], ["us-ca-015", 65], ["us-ca-105", 66],
["us-ca-051", 67]
];
const initialMarkerData = [];
// Create the chart
chart = Highcharts.mapChart("ca-map", {
chart: {
map: topology,
backgroundColor: "rgba(0, 0, 0, 0)"
},
credits: {
enabled: false
},
mapNavigation: {
enabled: true,
buttonOptions: {
verticalAlign: "bottom"
}
},
title: {
text: undefined
},
legend: {
enabled: false
},
plotOptions: {
mappoint: {
dataLabels: {
enabled: false
},
}
},
series: [{
data: data,
name: "County",
color: "#609DCF",
allowPointSelect: false, // true
cursor: "pointer",
states: {
select: {
color: "#609DCF"
}
},
tooltip: {
pointFormat: "{point.name}"
}
},
{
type: "mappoint",
name: "Event",
data: initialMarkerData,
tooltip: {
pointFormat: "{point.name}"
}
}],
});
})();
</script>
</body>
</html>是的，可以在 Highcharts 中实现您正在寻找的功能。例如，您可以缩放到所选点并隐藏其他点。
document.getElementById('selectSacramento').addEventListener('click', function() {
const points = chart.series[0].points;
const thePoint = points.find(point => point.name === 'Sacramento');
points.forEach(point => {
if (point !== thePoint) {
point.graphic.hide();
}
});
thePoint.zoomTo();
chart.mapZoom(1.3);
});
document.getElementById('zoomOut').addEventListener('click', function() {
const points = chart.series[0].points;
points.forEach(point => {
point.graphic.show();
});
chart.zoomOut();
});
现场演示：https://jsfiddle.net/BlackLabel/et7q3oz8/
API参考：
https://api.highcharts.com/class-reference/Highcharts.Chart#zoomOut
https://api.highcharts.com/class-reference/Highcharts.SVGElement#hide