Google Charts加载JSON中UNIX时间戳数据时图表为空求助

核心问题分析 #

你的代码有三个关键错误导致图表为空：

• 错误处理JSON数组：Object.entries(jsonData[key])会把数组转为「索引-元素」的键值对，完全偏离原数据结构
• 日期列类型错误：Google Charts的时间序列需要使用date类型，而非string，且未将UNIX时间戳转为可识别的日期对象
• 异步请求使用已弃用的async: false写法

修正后的完整代码 #

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://www.gstatic.com/charts/loader.js"></script>

<script type="text/javascript">
google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(drawChart);

function drawChart() {
  $.ajax({
    url: "prices.json",
    dataType: "json",
    async: true // 改用异步请求，避免阻塞
  }).done(function(jsonData) {
    var key = "prices";
    // 直接遍历prices数组，将时间戳转为Date对象，数值保持为数字
    var chartData = jsonData[key].map(function(item) {
      return [new Date(item[0]), item[1]];
    });

    var data = new google.visualization.DataTable();
    data.addColumn('date', '日期'); // 列类型改为date
    data.addColumn('number', '价格');
    data.addRows(chartData);

    var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
    chart.draw(data, {
      width: 800,
      height: 400,
      hAxis: {
        format: 'yyyy-MM-dd' // 自定义日期显示格式，可选
      }
    });
  }).fail(function() {
    console.error("加载JSON数据失败");
  });
}
</script>
<div id="chart_div" style="width: 100%; height: 400px;"></div>

关键修正点说明 #

• 数据处理逻辑：直接遍历jsonData[key]数组，每个元素的第一个值是UNIX毫秒时间戳，用new Date(item[0])转为Google Charts可识别的日期对象
• 列类型调整：将日期列的类型从string改为date，确保图表能正确解析时间序列
• 异步请求优化：移除async: false，改用done回调处理成功返回的数据，同时添加fail回调排查加载失败问题
• 可选优化：添加hAxis.format自定义日期显示格式，提升图表可读性

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