Google Charts用AJAX返回JSON调用arrayToDataTable报错解决方案

DevOps 小满

2026-8-29

问题根源

报错来自两个写法问题：

你拿到的genres字符串不符合JSON语法规范：标准JSON只能有一个顶层数据结构，当前返回的内容是多段独立数组用逗号拼接的零散片段，没有外层方括号包裹成完整的二维数组，解析器读到第一个数组末尾的逗号时就会抛出Unexpected token ,错误。
数据传入arrayToDataTable的方式错误：该方法原生接收二维数组作为参数，你在解析结果外额外套了一层[]，就算解析成功也会出现数据结构不匹配的问题。

修复步骤

1. 把返回内容处理成合法JSON再解析

如果暂时不调整后端接口，直接在前端给返回的字符串首尾补上外层方括号，拼成合法JSON结构后再解析：

// 拼接成完整的二维数组JSON字符串
const validJson = `[${genres}]`;
const chartSource = jQuery.parseJSON(validJson);

如果可以修改后端PHP代码，最优方案是在后端把所有行数据整理成完整二维数组后，直接用json_encode输出标准JSON，从根源避免返回非规范格式的问题。

2. 正确传入图表数据源

去掉多余的外层数组包裹，直接把解析完成的二维数组传入方法即可：

// 不要额外套[]，直接传入解析好的二维数组
var data = new google.visualization.arrayToDataTable(chartSource);

额外优化建议

你当前用的同步AJAX会阻塞页面主线程，导致请求期间页面无响应，体验很差，推荐改成异步模式处理数据加载和图表渲染：

$.ajax({
   url: "includes/ajaxproject.php",
   dataType: "json",
   type: "POST",
   data: {
      bar: true
   },
   success: function(res) {
      // 拿到数据后再加载图表依赖、执行渲染
      google.charts.load('current', {'packages':['corechart']});
      google.charts.setOnLoadCallback(function() {
        var data = new google.visualization.arrayToDataTable(res);
        // 在此处补充图表配置、调用draw方法渲染即可
      });
   }
});