新手求助：不使用jQuery，用JavaScript AJAX为HighCharts获取JSON数据

嘿，刚从静态网站转动态开发的新手朋友，我完全懂你现在的困惑——刚接触HighCharts又不能用熟悉的jQuery AJAX，确实容易卡壳。咱们一步步拆解问题，先把jQuery的依赖去掉，再实现原生AJAX加载JSON数据并渲染图表：

第一步：先明确你的JSON结构（示例） #

假设你的JSON文件（比如命名为chart-data.json）结构如下，方便后续对应取值：

{
  "chartTitle": "2024年月度销量统计",
  "xAxisCategories": ["一月", "二月", "三月", "四月", "五月"],
  "seriesData": [18, 32, 25, 41, 29]
}

第二步：用原生Fetch API获取JSON数据 #

替代jQuery的$.ajax，我们用现代原生JS的fetch来请求JSON文件，它更简洁且无需依赖：

// 发起请求获取JSON数据
fetch('chart-data.json')
  .then(response => {
    // 先检查请求是否成功
    if (!response.ok) {
      throw new Error(`请求失败，状态码：${response.status}`);
    }
    // 解析JSON格式的响应体
    return response.json();
  })
  .then(loadedData => {
    // 拿到数据后，初始化HighCharts图表
    renderChart(loadedData);
  })
  .catch(error => {
    // 捕获请求或解析过程中的错误
    console.error('加载JSON数据出错：', error);
    alert('图表数据加载失败，请检查文件路径或JSON格式');
  });

第三步：编写HighCharts初始化函数（用JSON数据） #

这里要注意去掉jQuery的$(function())，换成原生方式确保DOM加载完成：

// 初始化图表的函数，接收从JSON拿到的数据
function renderChart(data) {
  // 获取页面上的图表容器元素
  const chartContainer = document.getElementById('container');
  
  // 初始化HighCharts，直接使用JSON中的标题和数据
  const chart = Highcharts.chart(chartContainer, {
    title: {
      text: data.chartTitle // 从JSON读取图表标题
    },
    xAxis: {
      categories: data.xAxisCategories // 从JSON读取X轴分类
    },
    series: [{
      name: '产品销量',
      data: data.seriesData // 从JSON读取系列数据
    }]
  });
}

// 确保DOM加载完成后再执行请求（如果脚本放在<head>里的话）
document.addEventListener('DOMContentLoaded', function() {
  // 调用上面的fetch请求代码
  fetch('chart-data.json')
    .then(response => response.ok ? response.json() : Promise.reject('请求失败'))
    .then(renderChart)
    .catch(error => console.error(error));
});

关键注意事项 #

• 脚本位置：如果把JS代码放在HTML的<body>标签末尾，其实可以不用DOMContentLoaded，因为此时容器元素已经存在了
• JSON路径：确保chart-data.json的路径正确，和HTML文件同目录直接写文件名，否则写相对路径（比如./data/chart-data.json）
• JSON格式校验：一定要保证JSON语法正确，比如引号是英文双引号、没有多余逗号，否则会解析失败
• 扩展场景：如果你的JSON有更复杂的结构（比如多个数据系列），只需要在renderChart里对应修改HighCharts的配置，比如添加多个series对象，每个对象的data取JSON里的对应字段就行

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