AmCharts入门问题：变量JSON数据无法在sparkline图表中显示

嘿，刚看了你的问题，这应该是数据格式不符合AmCharts要求加上部分配置缺失导致的，我帮你一步步修正：

核心问题分析 #

你的代码里有几个关键问题：

1. 数据结构错误：AmCharts的dataProvider需要的是对象数组，每个元素对应一个独立的数据点（包含分类字段和数值字段），但你现在的data是单个对象，把它包在[data]里只会让图表把整个对象当成一个数据项，自然找不到正确的数值。
2. 数值类型不对：你的数值是字符串格式（比如"9.2090000000"），AmCharts需要的是数字类型才能正确渲染线条。
3. categoryField未正确指定：你写的categoryField: data....没完成，需要明确指定数据里的分类字段名。

修正后的完整代码 #

首先把原始数据转换成AmCharts需要的格式，再调整图表配置：

// 你的原始数据（注意键名要加引号，否则会有语法错误）
const rawData = {
  "2018-04-28 17:03:04": "9.2090000000",
  "2018-04-28 18:03:15": "9.1870000000",
  "2018-04-28 19:06:43": "9.1870000000",
  "2018-04-28 20:07:41": "9.1880000000",
  "2018-04-28 21:08:16": "9.1810000000"
};

// 转换数据为AmCharts兼容的格式
const formattedData = Object.entries(rawData).map(([date, valueStr]) => ({
  date: date,
  value: Number(valueStr) // 把字符串数值转成数字类型
}));

// 创建Sparkline图表
AmCharts.makeChart(id, {
  "type": "serial",
  "dataProvider": formattedData, // 使用转换后的数组
  "categoryField": "date", // 指定分类字段为date
  // 配置日期轴，让图表正确解析时间
  "categoryAxis": {
    "parseDates": true,
    "minPeriod": "mm", // 数据粒度是分钟，可按需调整
    "gridAlpha": 0.1,
    "axisAlpha": 0 // 隐藏坐标轴，更贴合sparkline的简洁风格
  },
  // 配置线条（sparkline核心设置）
  "graphs": [{
    "type": "line",
    "valueField": "value", // 指定数值字段
    "lineAlpha": 1,
    "lineThickness": 2,
    "bullet": "none" // 隐藏数据点，保持sparkline的紧凑感
  }],
  // 调整边距，适配sparkline的紧凑样式
  "autoMargins": false,
  "marginLeft": 0,
  "marginRight": 0,
  "marginTop": 0,
  "marginBottom": 0,
  "height": 50 // 设置sparkline的高度
});

关键修正点说明 #

• 数据转换：用Object.entries遍历原始对象，把每个键值对转成{date: "...", value: 数字}的结构，确保图表能识别每个独立的数据点。
• dataProvider配置：直接传入转换后的数组，而不是把原始对象包在数组里。
• 日期轴解析：开启parseDates: true让图表把date字段当成时间处理，自动按时间顺序排序轴标签。
• 数值类型转换：用Number()把字符串数值转成数字，这样图表才能正确计算线条的位置和走势。

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