时间戳

首页 > 解决方案 > 地图 - 地图上每个国家的访问次数

amcharts - 地图 - 地图上每个国家的访问次数

问题描述

我正在使用 AmCharts 5，我想创建一个显示每个国家/地区的访问者的地图。此代码生成地图，但不显示每个国家/地区的访问者。

这就是我的代码现在产生的 在此处输入图像描述

HTML

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>unique_visits_per_country.js</title>
    <link rel="stylesheet" href="index.css" />
</head>
<body>
    <div id="chartdiv_unique_visits_per_country" style="width: 100%;height: 80vh;"></div>

<script src="../_libraries/amcharts/index.js"></script>
<script src="../_libraries/amcharts/themes/Animated.js"></script>

<script src="../_libraries/amcharts/map.js"></script>
<script src="../_libraries/amcharts/geodata/worldLow.js"></script>
<script src="unique_visits_per_country.js"></script>
  </body>
</html>

unique_visits_per_country.js

// Create root and chart
var root = am5.Root.new("chartdiv_unique_visits_per_country"); 
var chart = root.container.children.push(
  am5map.MapChart.new(root, {
    panX: "rotateX",
    projection: am5map.geoNaturalEarth1()
  })
);

// Create polygon series
var polygonSeries = chart.series.push(
  am5map.MapPolygonSeries.new(root, {
    geoJSON: am5geodata_worldLow,
    exclude: ["AQ"]
  })
);
// Data
polygonSeries.data = [
    { "id": "kn", "value": 88 },
    { "id": "sj", "value": 60 },
    { "id": "th", "value": 96 },
    { "id": "bl", "value": 92 },
    { "id": "ga", "value": 68 },
    { "id": "tr", "value": 63 },
    { "id": "ve", "value": 54 },
    { "id": "kh", "value": 70 },
    { "id": "jo", "value": 94 },
    { "id": "tv", "value": 54 }]

标签： amchartsamcharts5

解决方案

推荐阅读