Ajax调用返回数据正常但Highcharts图表无数据展示问题求助

问题原因 #

• Ajax默认将返回结果识别为字符串类型，没有转为可被Highcharts直接使用的JavaScript数组对象，直接将字符串赋值给series参数无法被识别。
• 更新后的返回数据中，每个系列的data字段为日期键值对对象，且数值为字符串类型，不符合Highcharts分类轴对应数据要求：分类轴对应的系列数据必须是和x轴categories顺序一致的纯数值数组。
• 当前配置中plotOptions指定的是column（柱状图）的堆叠配置，而图表类型为line（折线图），虽不影响基础渲染但属于冗余配置。

解决方法 #

1. 给Ajax请求添加dataType: 'json'配置，让jQuery自动将返回的JSON字符串转为JS对象，也可以在success回调中手动执行response = JSON.parse(response)完成转换。
2. 前端处理返回的series数据，将每个系列的data从键值对对象转为和x轴categories顺序对应的数值数组，也可以直接在PHP端生成时就输出符合要求的数组格式，减少前端处理逻辑。
3. （可选）清理冗余的plotOptions配置，避免后续维护混淆。

修改后的完整代码 #

function project_wise_lab(from_date, to_date) {
  // 先定义x轴分类和返回数据的日期键映射关系，保证顺序对应
  const xAxisCates = ['Oct 2020', 'Nov 2020', 'Dec 2020', 'Jan 2021', 'Feb 2021', 'Mar 2021', 'Apr 2021', 'May 2021'];
  const dateKeyMap = {
    'Oct 2020': '01-OCT-20',
    'Nov 2020': '01-NOV-20',
    'Dec 2020': '01-DEC-20',
    'Jan 2021': '01-JAN-21',
    'Feb 2021': '01-FEB-21',
    'Mar 2021': '01-MAR-21',
    'Apr 2021': '01-APR-21',
    'May 2021': '01-MAY-21'
  };
  $.ajax({
    type: "POST",
    url: 'dashboard/project_wise_labtest',
    data: {
      from_dte: from_date,
      to_dte: to_date
    },
    dataType: 'json', // 新增配置，自动转JSON为JS对象
    success: function(response) {
      // 处理series数据格式，转为符合要求的结构
      const formattedSeries = response.map(item => {
        const dataArr = xAxisCates.map(cate => {
          // 按x轴顺序取值，转成数字类型
          return Number(item.data[dateKeyMap[cate]]);
        });
        return {
          name: item.name,
          data: dataArr
        };
      });
      Highcharts.chart('subcontainer7', {
        chart: {
          type: 'line',
          height: 230,
        },
        credits: {
          enabled: false
        },
        title: {
          text: null
        },
        xAxis: {
          categories: xAxisCates
        },
        yAxis: {
          min: 0,
          title: {
            text: null
          },
          stackLabels: {
            enabled: false,
            style: {
              fontWeight: 'bold',
              color: (
                Highcharts.defaultOptions.title.style &&
                Highcharts.defaultOptions.title.style.color
              ) || 'gray'
            }
          }
        },
        legend: {
          align: 'center',
          verticalAlign: 'bottom',
          backgroundColor: Highcharts.defaultOptions.legend.backgroundColor || 'white',
          borderColor: '#CCC',
          shadow: false
        },
        colors: [
          '#4a7fbb',
          '#be4c48',
          '#97b954',
          '#7d6096'
        ],
        series: formattedSeries // 传入处理后的格式化数据
      });
    },
    error: function(xhr, status, error) {
      console.error(xhr);
    }
  });
}

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