如何解决如何使用 AmCharts 4 动态更改 mapPolygons 的填充颜色?
我实际上使用 AmCharts 4 在我的网站上显示世界地图。我想通过单击按钮来更改此地图的颜色(用于明暗模式)。
我发现此命令仅适用于一个国家/地区(在此示例中为法国):
worldpolygonSeries.getpolygonById("FR").fill = am4core.color("#f00");
我还成功地更改了我的 mappolygons
的 fill 属性:
worldpolygonSeries.mappolygons.template = am4core.color("#f00");
但它不会出现地图重新加载并保持我设置的第一种颜色...
这是我的全部代码:
// components/Map.vue
<template>
<div>
<div id="chartdiv" />
<button @click="colorMe()">Click me!</button>
</div>
</template>
<script>
import * as am4core from "@amcharts/amcharts4/core";
import * as am4maps from "@amcharts/amcharts4/maps";
import am4geodata_worldLow from "@amcharts/amcharts4-geodata/worldLow";
export default {
data() {
return {
map: undefined,worldpolygonSeries: undefined,worldpolygonTemplate: undefined
}
},methods: {
colorMe() {
this.worldpolygonSeries.mappolygons.template = am4core.color("#f00");
}
},mounted() {
// Create map instance
this.map = am4core.create("chartdiv",am4maps.MapChart);
// Set map deFinition
this.map.geodata = am4geodata_worldLow;
// Set projection
this.map.projection = new am4maps.projections.Miller();
// Create map polygon series
this.worldpolygonSeries = this.map.series.push(new am4maps.MappolygonSeries());
// Make map load polygon (like country names) data from GeoJSON
this.worldpolygonSeries.useGeodata = true;
// Configure series
this.worldpolygonTemplate = this.worldpolygonSeries.mappolygons.template;
this.worldpolygonTemplate.fill = am4core.color("#00f")
}
}
</script>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。