如何修改AnyChart代码加载本地JSON渲染Choropleth地图？

直接通过file://协议打开本地HTML文件时，浏览器的安全限制会阻止加载本地JSON文件，这是anychart.data.loadJsonFile("users.json")失效的核心原因。以下是几种可行的解决办法：

方法1：使用本地HTTP服务器运行项目 #

这是最通用的解决方案，能规避浏览器的本地文件访问限制：

• 若使用Node.js，先安装http-server：

  npm install -g http-server
  

  进入项目目录后启动服务：

  http-server
  

  用浏览器访问控制台显示的地址（如http://localhost:8080），此时loadJsonFile("users.json")即可正常加载本地文件。
• 若使用Python，Python 3环境运行：

  python -m http.server
  

  Python 2环境运行：

  python -m SimpleHTTPServer
  

  同样通过http://localhost:8000访问项目。

方法2：将JSON数据直接嵌入JavaScript代码 #

如果不想搭建服务器，可把users.json的内容直接复制到JS代码中，替换loadJsonFile调用：

anychart.onDocumentReady(function () {
  // 直接嵌入users.json的内容
  var rawData = {
    records: [
      {geoId: "CN", userCount: 150000, countriesAndTerritories: "China"},
      {geoId: "US", userCount: 120000, countriesAndTerritories: "United States"},
      // 其他国家数据...
    ]
  };

  // 沿用原数据处理逻辑（注意匹配JSON实际字段名）
  var geoData = rawData.records;
  var sumUsers = 0;
  var numUsers;
  var processedData = [];

  for (var i = 0; i < geoData.length; i++) {
    numUsers = parseInt(geoData[i].userCount);
    if ((geoData[i + 1]) != null && (geoData[i].geoId == geoData[i + 1].geoId)) {
      sumUsers += numUsers;
    } else {
      sumUsers += numUsers;
      processedData.push({ id: geoData[i].geoId, value: sumUsers, title: geoData[i].countriesAndTerritories });
      sumUsers = 0;
    }
  }

  // 完成地图渲染
  var map = anychart.map();
  map.geoData(anychart.maps.world);
  map.choropleth(processedData);
  map.container("container");
  map.draw();
});

注意要根据users.json的实际字段结构调整代码（比如用户数字段如果不是userCount，要替换对应变量）。

方法3：检查文件路径与JSON格式 #

若已使用服务器但仍失败，排查以下两点：

• 确认users.json与HTML文件的路径关系：如果放在子目录（如data/），路径需写成"data/users.json"。
• 验证users.json格式合法性：确保无语法错误（如遗漏逗号、引号不匹配），可通过JSON校验工具确认。

内容的提问来源于stack exchange，提问作者unpcd