如何使用 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 (将#修改为@）