使用MySQL输出的JSON加载Google动态折线图失败、不显示

核心代码错误定位 #

• 遍历逻辑变量不匹配，直接导致脚本中断
  你在调用$.each遍历返回的JSON数组时，回调函数的参数定义为(label, value1)，即数组索引为第一个参数、单条数据对象为第二个参数；但循环体内却访问了未定义的value变量，触发JS ReferenceError，导致后续绘图流程完全停止。
  错误代码片段：

  $.each(data, function (label, value1) {
    arrSales.push([value.label, value.value1]); // value未被定义
  });
  

• 数据类型不匹配，图表无法识别数值列
  你通过PHP返回的JSON中，value1字段为字符串格式（如示例中的"50.55"），直接传入Google Charts时会被判定为文本类型，无法生成数值轴的折线，即使修复变量名问题也会渲染出空图表。
• Google Charts库初始化流程缺失
  当前代码直接调用google.visualization相关API，但未按规范引入Google Charts核心加载器、等待库加载完成后再执行绘图逻辑，会触发google is not defined的报错。

修正后的可运行实现 #

1. 首先在页面头部引入必需的资源（jQuery、Google Charts核心库）：

   <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
   <script src="https://www.gstatic.com/charts/loader.js"></script>
   

2. 替换原有绘图逻辑，修正变量引用、类型转换与库初始化流程：

   // 加载Google Charts核心绘图包
   google.charts.load('current', {packages: ['corechart']});
   // 库加载完成后再触发绘图逻辑
   google.charts.setOnLoadCallback(drawLineChart);
   
   function drawLineChart() {
       $.ajax({
         url: "chart_data.php",
         dataType: "json",
         type: "GET",
         contentType: "application/json; charset=utf-8",
         success: function (data) {
           // 定义图表列结构，明确标注每列的数据类型
           var arrSales = [
             {label: '车辆注册编号', type: 'string'},
             {label: '百公里油耗', type: 'number'}
           ];
   
           // 修正遍历参数，明确每一条数据对象的引用名
           // 同时将字符串格式的油耗值转为数字类型
           $.each(data, function (index, item) {
             arrSales.push([item.label, Number(item.value1)]);
           });
   
           var options = {
             title: '平均油耗统计',
             curveType: 'function',
             legend: { 
               position: 'bottom', 
               textStyle: { color: '#555', fontSize: 14} 
             }
           };
   
           var dataTable = google.visualization.arrayToDataTable(arrSales);
           // 确认页面中存在ID为chart的容器元素
           var chart = new google.visualization.LineChart(document.getElementById('chart'));
           chart.draw(dataTable, options);
         },
         error: function () {
           alert('数据加载失败，请检查控制台报错');
         }
       });
   }
   

额外校验项 #

• 确认页面中存在ID为chart的DOM容器，且容器设置了明确的宽高，避免因容器尺寸为0导致图表不可见
• 可打开浏览器开发者工具的Console面板，查看实时JS报错信息，快速定位其他遗漏问题

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