以下是一个使用amCharts库的示例代码,演示如何根据选择框更改地图数据:
HTML代码:
amCharts Example
JavaScript代码(script.js):
// 创建地图实例
var chart = am4core.create("chartdiv", am4maps.MapChart);
// 设置地图的地理数据
chart.geodata = am4geodata_worldLow;
// 设置主题
chart.theme = am4themes_animated;
// 创建地图系列
var polygonSeries = chart.series.push(new am4maps.MapPolygonSeries());
polygonSeries.useGeodata = true;
// 设置地图颜色
var polygonTemplate = polygonSeries.mapPolygons.template;
polygonTemplate.fill = am4core.color("#74B266");
polygonTemplate.stroke = am4core.color("#ffffff");
// 数据1的地图数据
var data1 = [
{ "id": "US", "value": 100 },
{ "id": "FR", "value": 200 },
{ "id": "DE", "value": 300 },
// 添加更多国家的数据...
];
// 数据2的地图数据
var data2 = [
{ "id": "US", "value": 500 },
{ "id": "FR", "value": 600 },
{ "id": "DE", "value": 700 },
// 添加更多国家的数据...
];
// 默认显示数据1的地图数据
polygonSeries.data = data1;
// 监听选择框的值改变事件
document.getElementById("dataSelect").addEventListener("change", function () {
var selectedValue = this.value;
if (selectedValue === "data1") {
polygonSeries.data = data1;
} else if (selectedValue === "data2") {
polygonSeries.data = data2;
}
});
在上面的代码中,我们使用amCharts库创建了一个地图,并设置了两个不同的地图数据(data1和data2)。通过监听选择框的值改变事件,根据选择框的值来切换地图数据。默认情况下,显示data1的地图数据。
请注意,你需要将amCharts库的各个文件链接到你的HTML文件中,以使示例代码正常工作。