使用纯JavaScript调用Highcharts的setData从JSON获取数据失败

别担心，作为Highcharts新手，刚接触AJAX动态加载数据时踩坑太正常了！我来帮你梳理排查方向，补全代码逻辑：

第一步：先确保你的JSON文件格式正确 #

如果JSON本身有语法错误，JSON.parse会直接失败，先检查你的charts.json结构是否规范，比如一个适合Highcharts的示例结构：

{
  "categories": ["一月", "二月", "三月", "四月"],
  "seriesData": [15, 28, 36, 42]
}

注意不要有多余的逗号、引号要配对，你可以在浏览器控制台用JSON.parse()直接测试你的JSON内容是否合法。

第二步：补全并优化你的AJAX和数据解析代码 #

你的代码里parsess函数没写完，而且缺少请求错误处理，我帮你完善成可运行的版本：

window.onload = function() {
  var Request = new XMLHttpRequest();
  // 第三个参数设为true，开启异步请求（默认也是true，但显式写更清晰）
  Request.open("GET", "charts.json", true);
  Request.onload = function() {
    // 先判断请求是否成功，避免处理错误状态的响应
    if (Request.status >= 200 && Request.status < 400) {
      try {
        var datass = JSON.parse(Request.responseText);
        parsess(datass);
      } catch (e) {
        console.error("JSON解析失败：", e);
      }
    } else {
      console.error("请求JSON文件失败，状态码：", Request.status);
    }
  };
  // 处理网络错误情况
  Request.onerror = function() {
    console.error("请求发生网络错误，请检查文件路径或服务器状态");
  };
  Request.send();
};

function parsess(datae) {
  // 先在控制台打印拿到的数据，确认是否正确获取到了内容
  console.log("获取到的JSON数据：", datae);
  
  // 初始化Highcharts图表，把JSON数据对应到图表配置里
  Highcharts.chart('container', {
    title: {
      text: '动态加载数据的Highcharts图表'
    },
    xAxis: {
      // 假设JSON里的categories是x轴分类
      categories: datae.categories
    },
    series: [{
      name: '业务数据',
      // 假设JSON里的seriesData是图表数据数组
      data: datae.seriesData
    }]
  });
}

第三步：排查常见坑点 #

• 跨域/本地文件访问问题：如果你直接用浏览器打开本地HTML文件（file://协议），浏览器可能会拦截AJAX请求本地JSON文件。解决办法是用本地服务器运行你的项目，比如用Node.js的http-server工具，或者XAMPP这类服务器软件。
• 数据结构不匹配：一定要通过console.log(datae)确认你拿到的JSON结构和代码里引用的字段一致，比如你代码里写datae.categories，那JSON里必须有这个键名。
• Highcharts依赖是否加载：确保你的页面里已经正确引入了Highcharts的JS文件（建议本地引入，避免外链问题），比如在<head>里添加：

  <script src="highcharts.js"></script>
  

• 图表容器存在：页面里必须有一个用于渲染图表的DOM元素，比如：

  <div id="container" style="width: 100%; height: 400px;"></div>
  

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