如何用map/filter从JSON提取数值数组用于Chart.js图表开发

数据老陈

2026-8-23

解决方案

假设你的data.json结构是这样的：

[
  {"day": "Mon", "amount": 40},
  {"day": "Tue", "amount": 60},
  {"day": "Wed", "amount": 80},
  {"day": "Thu", "amount": 120},
  {"day": "Fri", "amount": 90}
]

直接用fetch拉取数据，再结合filter（可选，用于过滤无效数据）和map就能提取出纯amount数值数组，代码如下：

fetch('./data.json')
  .then(res => {
    if (!res.ok) throw new Error('Failed to load data');
    return res.json();
  })
  .then(rawData => {
    // 先过滤出同时包含day和amount的对象（可选，若数据源可靠可跳过）
    const validEntries = rawData.filter(entry => 'day' in entry && 'amount' in entry);
    // 提取所有amount值成数组
    const amountData = validEntries.map(entry => entry.amount);

    // 初始化Chart.js图表
    new Chart(document.getElementById('yourChartId'), {
      type: 'line', // 按需修改图表类型
      data: {
        labels: validEntries.map(entry => entry.day), // 可选：提取日期作为标签
        datasets: [{
          label: 'Amount Stats',
          data: amountData, // 这里就是你要的数值数组
          borderColor: '#36A2EB',
          fill: false
        }]
      }
    });
  })
  .catch(err => console.error('Error:', err));

要点说明

filter的作用：如果你的data.json里可能存在缺少day或amount的无效对象，用filter提前过滤掉，避免后续map时出现undefined值打乱图表渲染。如果数据源100%可靠，直接用rawData.map(entry => entry.amount)就行。
路径注意：fetch的路径要和data.json的实际位置匹配，比如文件在根目录就写'/data.json'，和脚本同目录就写'./data.json'。
Chart.js集成：提取后的amountData直接赋值给数据集的data字段即可，完全符合Chart.js的要求。