Highmaps choropleth 显示独特的颜色/Highmap 看不到数据中的值字段

Question

我一直在尝试使用 Highcjart 构建世界等值线地图，但即使范围不同，我地图中的所有区域都显示相同的颜色。这些值显示在工具提示中。 我从这里的例子中得到灵感：

https://jsfiddle.net/gh/get/jquery/1.11.0/highslide-software/highcharts.com/tree/master/samples/mapdata/custom/world-continents 我注意到在我的tooltip Highmap 中没有读取point.region，或point.value，也没有读取point.name 我到处查看人们在 Stackoverflow 上遇到的不同问题，比如这些：

Highcharts: Highmaps - Choropleth maps - All states are the same color Highmaps - Choropleth maps - All area are the same color

但这似乎并没有解决我的问题。

 let rendermap = Highcharts.mapChart("map-container", {
  chart: {
    map: "custom/world",
    backgroundColor: "#EEF0EF",
     spacing: [1, 0, 0, 1],
  },
  title: {
    text: "",
  },
  credits: {
    enabled: false,
  },
  borderColor: "#EEF0EF",
  mapNavigation: {
    enabled: true,
    enableDoubleClickZoomTo: true,
  },
  legend: {
    enabled: false,
  },
  mapNavigation: {
    enabled: true,
    buttonOptions: {
      theme: {
        fill: "rgba(255, 255, 255, 0)",
        "stroke-width": 1,
        stroke: "#fb9718",
        r: 13,
        states: {
          hover: {
            fill: "#fb9718",
          },
          select: {
            stroke: "#039",
            fill: "#fb9718",
          },
        },
      },
      verticalAlign: "top",
      alignValue: "center",
    },
  },
  tooltip: {
   borderWidth: 0,
   shadow: false,
   useHTML: true,
   footerFormat:
    '<span style="font-size: .750em;color:gray;">{point.region}</span>',
   padding: 0,
   headerFormat: '<b style="font-size:1.50em">{point.key}</b><br/>',
   pointFormat: '<span style="font-size:1em">{point.risk}</span>',
   style: {
    width: "500px",
   },
},
   colorAxis: {
    min: 0
    },
    series: [
      {
        data: newmapdata,
        mapData: Highcharts.maps["custom/world"],
        type: "map",
        joinBy: ["iso-a2", "code2"],
        states: {
          hover: {
            color: "#F4edba",
          },
        },
      },
    ],

    // colors: ["#CBCDCC"],
    legend: {
      enabled: false,
    },
});

然后我以这种方式更新地图中的数据。

rendermap.update({
  series: [
      {
        data: newmapdata,
        mapData: Highcharts.maps["custom/world"],
        type: "map",
        joinBy: ["iso-a2", "code2"],
        states: {
          hover: {
            color: "#F4edba",
          },
        },
      },
    ]});

我的数据是：

let newmapdata=[
  {
    name: "infrastructure",
    value: 0,
    region: "EUROPE",
    code: "Albania",
    code3: "ALB",
  },
  {
    name: "infrastructure",
    value: 11.9,
    region: "EUROPE",
    code: "Austria",
    code3: "AUT",
  },
  {
    name: "infrastructure",
    value: 2,
    region: "EUROPE",
    code: "Belgium",
    code3: "BEL",
  },
  {
    name: "infrastructure",
    value: 16.5,
    region: "EUROPE",
    code: "Bulgaria",
    code3: "BGR",
  },
  {
    name: "infrastructure",
    value: 12.2,
    region: "EUROPE",
    code: "Croatia",
    code3: "HRV",
  },
  {
    name: "infrastructure",
    value: 14.1,
    region: "EUROPE",
    code: "Cyprus",
    code3: "CYP",
  },
  {
    name: "infrastructure",
    value: 5.9,
    region: "EUROPE",
    code: "Denmark",
    code3: "DNK",
  },
  {
    name: "infrastructure",
    value: 15.2,
    region: "EUROPE",
    code: "Estonia",
    code3: "EST",
  },
  {
    name: "infrastructure",
    value: 4.2,
    region: "EUROPE",
    code: "Finland",
    code3: "FIN",
  },
  {
    name: "infrastructure",
    value: 4.3,
    region: "EUROPE",
    code: "France",
    code3: "FRA",
  },
  {
    name: "infrastructure",
    value: 19.1,
    region: "EUROPE",
    code: "Germany",
    code3: "DEU",
  },
  {
    name: "infrastructure",
    value: 8.5,
    region: "EUROPE",
    code: "Greece",
    code3: "GRC",
  },
  {
    name: "infrastructure",
    value: 8.1,
    region: "EUROPE",
    code: "Hungary",
    code3: "HUN",
  },
  {
    name: "infrastructure",
    value: 21,
    region: "EUROPE",
    code: "Iceland",
    code3: "ISL",
  },
  {
    name: "infrastructure",
    value: 37.5,
    region: "EUROPE",
    code: "Ireland",
    code3: "IRL",
  },
];

Answer 1

您需要将数据正确连接到地图数据：

    series: [{
        joinBy: ["iso-a3", "code3"],
        ...
    }],

---

现场演示： https://jsfiddle.net/BlackLabel/9z2jyo43/

API 参考： https://api.highcharts.com/highmaps/series.map.joinBy