AmChart 5加载数据库数据无法生成蜡烛图/OHLC图问题排查

先核对数据格式是否完全匹配 #

AmChart5的蜡烛/OHLC图对数据格式要求严格，必须和官方规范一致：

• 字段名必须是date、open、high、low、close，大小写敏感不能出错
• date字段必须是Date对象，不能是字符串（比如接口返回的"2024-05-20"要转成new Date("2024-05-20")）
• 所有OHLC数值必须是数字类型，不能是字符串（比如"1.23"要转成1.23）

排查方式：直接在浏览器控制台打印接口返回的原始数据，和你手动赋值的正确数据对比，看字段名、数据类型是否完全一致。标准的合法数据格式示例：

[
  { date: new Date("2024-05-20"), open: 100, high: 105, low: 98, close: 102 },
  { date: new Date("2024-05-21"), open: 102, high: 106, low: 100, close: 104 }
]

异步加载后要正确更新图表 #

接口请求是异步操作，不能在初始化图表时直接赋值，必须等数据返回后再更新图表数据：

• 如果使用Am5的List数据对象，调用data.setAll(处理后的数据)更新
• 如果直接给系列的data属性赋值，确保在数据返回后再执行赋值操作

示例代码参考：

// 初始化图表和空数据对象
let data = am5.List.new([]);
let series = chart.series.push(am5xy.CandlestickSeries.new(root, {
  name: "Series",
  xAxis: xAxis,
  yAxis: yAxis,
  valueYField: "close",
  openValueYField: "open",
  highValueYField: "high",
  lowValueYField: "low",
  valueXField: "date",
  data: data
}));

// 调用接口并处理数据
fetch('data.php?timeRange=day')
  .then(res => res.json())
  .then(rawData => {
    // 转换数据格式：字符串转Date对象、数字字符串转数值
    let processedData = rawData.map(item => ({
      date: new Date(item.date),
      open: Number(item.open),
      high: Number(item.high),
      low: Number(item.low),
      close: Number(item.close)
    }));
    // 更新图表数据
    data.setAll(processedData);
  })
  .catch(err => console.error('数据加载失败:', err));

检查控制台是否有隐性错误 #

打开浏览器F12控制台，查看是否存在JavaScript报错——比如跨域问题、数据转换失败、JSON格式非法等。同时可以直接在浏览器地址栏访问data.php，确认返回的是合法JSON，且HTTP状态码为200。

确认数据范围与时间轴匹配 #

如果接口返回的数据时间范围和图表当前显示的时间轴不匹配，图表也会显示为空。数据加载完成后，可以调用chart.zoomToDates()让时间轴自动适配数据范围：

// 数据处理完成后执行
let firstDate = processedData[0].date;
let lastDate = processedData[processedData.length - 1].date;
chart.zoomToDates(firstDate, lastDate);

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