Google饼图读取JSON文件报错：主线程同步XMLHttpRequest已弃用

嘿，这个问题我碰到过好多次啦！核心症结就是异步代码的执行顺序没理顺：当你把async设为true后，图表渲染的代码在JSON数据还没加载完就抢先执行了，那自然会提示“表格无列”——因为此时数据还没到位嘛。而同步XHR被弃用是浏览器出于性能和用户体验的考虑，咱肯定得用异步方案来解决。

下面给你一套靠谱的解决思路和代码示例：

核心解决逻辑 #

把数据请求、数据处理、图表渲染这三步的顺序串对：

• 先等Google Charts库加载完成
• 再发起异步请求获取JSON数据
• 最后等数据加载完成后，再构建DataTable并渲染饼图

完整代码示例 #

// 先加载Google Charts核心库
google.charts.load('current', {'packages':['corechart']});
// 库加载完成后，触发数据请求和图表渲染的函数
google.charts.setOnLoadCallback(fetchDataAndDrawChart);

function fetchDataAndDrawChart() {
  var xhr = new XMLHttpRequest();
  // 这里async设为true，启用异步请求
  xhr.open('GET', '你的JSON文件路径.json', true);

  // 当请求成功完成时的回调
  xhr.onload = function() {
    if (xhr.status === 200) {
      // 解析JSON数据
      var jsonData = JSON.parse(xhr.responseText);
      
      // 构建Google Charts需要的DataTable
      var data = new google.visualization.DataTable();
      // 这里要根据你的JSON结构调整列定义，示例是标签+数值的结构
      data.addColumn('string', '分类');
      data.addColumn('number', '数值');
      // 把JSON数据逐行添加到DataTable
      jsonData.forEach(function(item) {
        data.addRow([item.label, item.value]);
      });

      // 配置饼图选项
      var options = {
        title: '我的饼图',
        width: 400,
        height: 300
      };

      // 渲染饼图
      var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
      chart.draw(data, options);
    } else {
      console.error('数据加载失败，状态码：' + xhr.status);
    }
  };

  // 请求出错时的处理
  xhr.onerror = function() {
    console.error('请求JSON数据时发生网络错误');
  };

  // 发送请求
  xhr.send();
}

关键注意点 #

1. JSON数据格式要匹配：确保你的JSON结构能转换成DataTable的格式，比如示例中用的是[{label: '分类1', value: 20}, ...]，如果你的JSON字段名不同，要对应修改addRow里的取值。
2. 调试技巧：可以在JSON.parse之后加一行console.log(jsonData)，看看数据是否正确加载，避免因为数据格式错误导致图表无法渲染。
3. 避免全局变量混乱：把所有逻辑封装在函数里，减少全局变量的使用，避免意外的顺序问题。

这样改完之后，既解决了同步XHR的弃用警告，又能保证饼图正常渲染啦！

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