Chart.js 极地图（详细教程）

什么是 Chart.js 极地图？

在数据可视化领域，地图图表一直是一个高阶但极具表现力的工具。尤其是当你要展示地理分布数据时，比如某个国家的销售分布、用户活跃地区、疫情传播范围等，传统的柱状图或折线图就显得力不从心了。这时候，Chart.js 极地图就派上用场了。

你可能听说过 ECharts、D3.js 这类强大工具，它们确实功能全面，但学习成本高。而 Chart.js 作为一款轻量级、易上手的图表库，通过插件机制也支持极地图功能，尤其适合初学者和中阶开发者快速实现地理数据可视化。

简单来说，Chart.js 极地图就是把地图轮廓和数据点“画”在网页上，让你一眼看出哪些区域数据高、哪些区域低。它不是要你成为地理学家，而是帮你用最直观的方式“读”懂数据。

安装与环境准备

在动手之前，我们先搭建一个基础的开发环境。如果你还没用过 Chart.js，别担心，它的安装非常简单。

打开你的项目根目录，执行以下命令：

npm install chart.js

这一步相当于“买好画笔和颜料”，是所有图表工作的基础。接着，我们还需要安装一个专门支持地图的插件：

npm install chartjs-adapter-moment chartjs-adapter-date-fns

虽然这两个插件主要是处理时间格式的，但它们为后续地图插件打下了兼容性基础。真正的地图支持来自 chartjs-chart-geo 这个插件：

npm install chartjs-chart-geo

安装完成后，你就可以在项目中引入 Chart.js 和地图插件了。

注意：如果你是用 CDN 方式引入，可以直接在 HTML 中添加如下代码：
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-chart-geo@latest/dist/chartjs-chart-geo.min.js"></script>

这样，你就能在浏览器中使用 Chart.js 极地图了。

创建一个基础的极地图

让我们从一个最简单的例子开始：画一张世界地图，用颜色深浅表示不同国家的“值”。

首先，创建一个 HTML 文件，内容如下：

<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  <title>Chart.js 极地图示例</title>
  <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/chartjs-chart-geo@latest/dist/chartjs-chart-geo.min.js"></script>
  <style>
    #mapCanvas {
      width: 100%;
      height: 600px;
      margin: 20px auto;
      border: 1px solid #ddd;
      display: block;
    }
  </style>
</head>
<body>
  <h2>Chart.js 极地图：世界数据分布图</h2>
  <canvas id="mapCanvas"></canvas>

  <script>
    // 1. 获取画布元素
    const ctx = document.getElementById('mapCanvas').getContext('2d');

    // 2. 创建 Chart 实例，指定类型为 'choropleth'
    // choropleth 是“着色地图”的意思，就是用颜色深浅表示数值大小
    const chart = new Chart(ctx, {
      type: 'choropleth', // 使用极地图类型
      data: {
        datasets: [{
          // 3. 指定地图数据来源：使用 GeoJSON
          // 这里我们使用世界地图的通用 GeoJSON 数据
          geoData: 'https://cdn.jsdelivr.net/npm/world-atlas@2/countries-110m.json',
          // 4. 设置每个国家的数据值
          data: {
            'USA': 1200,
            'CHN': 1800,
            'IND': 800,
            'DEU': 700,
            'FRA': 650,
            'JPN': 950,
            'BRA': 500,
            'RUS': 600
          },
          // 5. 配置颜色映射
          // 从浅色到深色，代表数值从低到高
          backgroundColor: (context) => {
            const value = context.dataset.data[context.dataIndex];
            // 用颜色渐变表示数值高低
            return value > 1000 ? '#FF6384' : value > 500 ? '#FFB347' : '#4BC0C0';
          }
        }]
      },
      options: {
        plugins: {
          legend: {
            position: 'top',
            labels: {
              boxWidth: 12,
              padding: 10
            }
          },
          tooltip: {
            callbacks: {
              // 自定义提示框内容
              label: (context) => {
                const country = context.dataset.data[context.dataIndex];
                const value = context.dataset.data[context.dataIndex];
                return `${context.label}: ${value}`;
              }
            }
          }
        },
        responsive: true,
        maintainAspectRatio: false,
        // 6. 设置地图中心和缩放级别
        layout: {
          padding: 20
        },
        interaction: {
          mode: 'nearest',
          intersect: false
        }
      }
    });
  </script>
</body>
</html>

这个例子虽然短，但包含了极地图的核心要素：

使用 choropleth 类型，这是 Chart.js 极地图的标准类型。
geoData 指向一个在线的 GeoJSON 地图数据文件，它包含了全世界所有国家的边界坐标。
data 字段是一个对象，键是国家的 ISO 3166-1 代码（如 USA、CHN），值是你要展示的数值。
backgroundColor 是一个函数，根据每个国家的数值动态设置颜色，实现“颜色深浅反映数据高低”的效果。

小贴士：GeoJSON 是一种标准格式，用来描述地理数据。你可以理解为“地图的坐标说明书”。

数据映射与颜色策略

在极地图中，颜色不是随便配的，它是一种“数据编码”方式。颜色越深，代表数值越高，这叫“色阶”（color scale）。我们来深入看看如何自定义颜色。

假设你想用更平滑的渐变色，而不是只有三种颜色。你可以引入 colorScale 配置：

options: {
  plugins: {
    colors: {
      // 定义从浅到深的渐变色
      // 这里使用了 10 个颜色，从浅蓝到深红
      scales: {
        'r': {
          color: [
            '#e0f7fa', '#b2dfdb', '#80cbc4', '#4db6ac', '#26a69a',
            '#00897b', '#00695c', '#004d40', '#003322', '#001a15'
          ]
        }
      }
    }
  }
}

然后在 data 中使用 color 字段：

data: {
  'USA': 1200,
  'CHN': 1800,
  'IND': 800,
  // ...
},
color: (context) => {
  const value = context.dataset.data[context.dataIndex];
  // 将值映射到 0~9 的索引
  const index = Math.min(Math.floor((value / 2000) * 10), 9);
  return `r-${index}`;
}

这样，你就实现了从 0 到 1800 的连续颜色过渡，视觉效果更自然。

数值范围	颜色描述
0 ~ 200	浅蓝色，表示低值
200 ~ 400	中蓝色
400 ~ 600	绿色
600 ~ 800	深绿色
800 ~ 1800	深蓝色至深绿

这种策略就像“用温度计表示天气”，颜色越深，温度越高，一目了然。

多数据集与交互增强

一个实际项目中，往往需要对比多个维度。比如，你可能想同时展示“GDP”和“人口密度”。

Chart.js 极地图支持多个数据集叠加显示：

data: {
  datasets: [
    {
      label: 'GDP（单位：十亿美元）',
      geoData: 'https://cdn.jsdelivr.net/npm/world-atlas@2/countries-110m.json',
      data: { 'USA': 25000, 'CHN': 18000, 'JPN': 5000 },
      backgroundColor: (context) => {
        const value = context.dataset.data[context.dataIndex];
        return value > 20000 ? '#FF6384' : value > 10000 ? '#FFB347' : '#4BC0C0';
      }
    },
    {
      label: '人口密度（人/平方公里）',
      geoData: 'https://cdn.jsdelivr.net/npm/world-atlas@2/countries-110m.json',
      data: { 'USA': 36, 'CHN': 150, 'JPN': 340 },
      backgroundColor: (context) => {
        const value = context.dataset.data[context.dataIndex];
        return value > 300 ? '#FF6384' : value > 100 ? '#FFB347' : '#4BC0C0';
      }
    }
  ]
}

在图表中，你可以通过图例切换显示哪个数据集。同时，鼠标悬停时，提示框会显示具体数值，交互体验非常友好。

常见问题与解决方案

地图显示空白？
检查 geoData 的 URL 是否可访问。建议用浏览器打开链接，确认返回的是合法的 GeoJSON 数据。
颜色不生效？
确保 backgroundColor 返回的是合法的颜色字符串，不能是 undefined。
数据不对应国家？
国家名称必须与 GeoJSON 中的 id 字段完全一致。例如，中国在 GeoJSON 中是 CHN，不是 China。
性能卡顿？
地图数据量大时，建议使用 countries-50m.json 代替 110m.json，降低精度以提升性能。

总结

Chart.js 极地图是一个兼具易用性与表现力的可视化工具。它不像 D3 那样需要从零构建，也不像 ECharts 那样臃肿，特别适合需要快速展示地理数据的项目。

通过本文，你已经掌握了：

如何安装并引入 Chart.js 极地图插件
如何使用 GeoJSON 构建地图轮廓
如何通过颜色映射表示数据高低
如何支持多数据集与交互功能

现在，你可以尝试将它用在自己的项目中——无论是展示用户分布、区域销售，还是疫情趋势，一张清晰的地图，胜过千言万语。

记住，数据可视化的目标不是炫技，而是让信息“看得懂”。而 Chart.js 极地图，正是帮你达成这一目标的好帮手。