Highcharts无法展示AJAX返回数据 求问题排查方案

我来帮你分析下为什么Highcharts没显示内容，核心问题是你返回的原始数据格式和Highcharts要求的不匹配，再加上几个可能的基础问题，一步步来解决：

1. 先搞懂Highcharts需要的数据结构 #

你AJAX返回的是包含员工信息的对象数组，但Highcharts没法直接识别这种格式。比如做柱状/折线图的话，它需要明确的分类（比如员工姓名）和对应的数据系列（比如working、beforeWork这两组数据）。

举个例子，你需要把原始数据转换成这样的结构：

• X轴分类：['Tom', 'Peter', 'Kate']
• 工作时长系列：[5,4,5]
• 班前时长系列：[11,12,12]

2. 具体修改步骤 #

第一步：在AJAX回调里转换数据 #

在你的AJAX请求的success函数里，先把原始数据处理成Highcharts能识别的格式：

success: function(response) {
  // 先确认数据是否正确拿到，控制台打印看看
  console.log('返回的数据：', response.data);

  // 提取X轴分类（员工姓名）
  const employeeNames = response.data.map(item => item.employeeName);
  // 提取工作时长数据
  const workingData = response.data.map(item => item.working);
  // 提取班前时长数据
  const beforeWorkData = response.data.map(item => item.beforeWork);

  // 接下来初始化Highcharts
  Highcharts.chart('你的图表容器ID', {
    chart: {
      type: 'column' // 可以换成line、bar等你需要的图表类型
    },
    title: {
      text: '员工时长统计'
    },
    xAxis: {
      categories: employeeNames, // 这里用转换后的员工姓名
      title: {
        text: '员工姓名'
      }
    },
    yAxis: {
      title: {
        text: '时长（单位）'
      }
    },
    series: [
      {
        name: '工作中时长',
        data: workingData
      },
      {
        name: '班前时长',
        data: beforeWorkData
      }
    ]
  });
}

第二步：检查基础配置是否正确 #

• 确保图表容器存在：页面上必须有一个带ID的DOM元素，比如：

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

  注意要给容器设置宽高，不然图表没法显示。
• 确认脚本正确引入：要在页面里引入jQuery（如果用jQuery的AJAX）和Highcharts的脚本文件，比如：

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

  （建议用本地文件或者可靠的CDN，确保路径正确）
• 检查AJAX请求是否成功：打开浏览器的开发者工具（F12），看Network标签里的请求状态是不是200，Console标签有没有报错。如果请求失败，先解决AJAX的问题。

3. 完整示例代码 #

给你一个可以直接参考的完整代码片段：

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>员工时长统计</title>
  <script src="jquery.min.js"></script>
  <script src="highcharts.js"></script>
</head>
<body>
  <!-- 图表容器 -->
  <div id="chartContainer" style="width: 800px; height: 400px;"></div>

  <script>
    $(function() {
      $.ajax({
        url: '你的数据接口地址',
        type: 'GET',
        dataType: 'json',
        success: function(response) {
          // 数据转换
          const employeeNames = response.data.map(item => item.employeeName);
          const workingData = response.data.map(item => item.working);
          const beforeWorkData = response.data.map(item => item.beforeWork);

          // 渲染图表
          Highcharts.chart('chartContainer', {
            chart: { type: 'column' },
            title: { text: '员工工作时长统计' },
            xAxis: {
              categories: employeeNames,
              title: { text: '员工姓名' }
            },
            yAxis: { title: { text: '时长' } },
            series: [
              { name: '工作中时长', data: workingData },
              { name: '班前时长', data: beforeWorkData }
            ]
          });
        },
        error: function(xhr, status, err) {
          console.error('AJAX请求出错：', err);
        }
      });
    });
  </script>
</body>
</html>

按照上面的步骤修改后，应该就能正常显示图表了。

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