JavaScript数组处理：图表数据格式化技巧

本篇文章主要是结合我之前面试的各种经历和实战开发中遇到的问题解决经验整理的，希望这篇《JavaScript数组重塑：图表数据格式化技巧》对你有很大帮助！欢迎收藏，分享给更多的需要的朋友学习~

1. 引言

在前端开发中，我们经常从后端API获取数据。这些数据通常以数组中包含多个对象的形式呈现，每个对象代表一个记录。然而，许多流行的图表库（如Chart.js、ECharts等）为了更高效地渲染多系列图表，往往要求数据采用一种更“转置”或“聚合”的格式，即所有类别的同一指标值聚合到一个数组中。本教程将指导您如何将一种常见的扁平化数据结构转换为图表库所需的特定格式。

2. 原始数据结构与目标数据结构

首先，我们来看一下原始的数据格式和我们希望转换成的目标格式。

2.1 原始数据结构

原始数据是一个对象数组，每个对象包含一个时间点以及该时间点对应的多个指标值。

[
    {
        "time": "18th",
        "open": 100,
        "closed": 60,
        "waiting": 12
    },
    {
        "time": "20th",
        "open": 120,
        "closed": 80,
        "waiting": 75
    },
    {
        "time": "22nd",
        "open": 170,
        "closed": 0,
        "waiting": 34
    },
]

这种格式对于表格展示或单个记录的查看非常直观，但对于绘制多条折线图或柱状图时，需要对数据进行重组。

2.2 目标数据结构

我们期望的目标格式是一个包含两个主要键的对象：time（一个时间轴标签数组）和 graphData（一个包含多个图表系列对象的数组）。每个图表系列对象包含一个 label（系列名称）和一个 data（该系列所有时间点对应的数值数组）。

{
    "time": ["18th", "20th", "22nd"],
    "graphData": [
        {
            "label": "open",
            "data": [100, 120, 170],
        },
        {
            "label": "closed",
            "data": [60, 80, 0],
        },
        {
            "label": "waiting",
            "data": [12, 75, 34],
        }
    ]
}

这种格式将所有open的值、closed的值、waiting的值分别聚合到各自的数组中，并与对应的时间轴time数组对齐，这正是许多图表库所期望的输入。

3. 数据转换实现

要实现这种转换，我们可以利用JavaScript的Array.prototype.map()方法，它允许我们遍历数组并返回一个新数组，其中每个元素都是原始数组元素经过回调函数处理后的结果。

3.1 提取时间轴数据

时间轴数据 time 的提取相对简单，我们只需要从原始数组的每个对象中提取 time 属性的值。

const source = [ /* 原始数据 */ ];
const timeLabels = source.map(item => item.time);
// timeLabels 将是 ["18th", "20th", "22nd"]

3.2 构建图表系列数据

构建 graphData 部分是核心。我们需要识别出所有表示数值的键（例如 open, closed, waiting），然后针对每个键，遍历原始数组，收集所有对应的值。

假设我们已知需要提取的数值键是 ['open', 'closed', 'waiting']。我们可以遍历这些键，对于每个键，再次使用 map 方法从原始数据中提取对应的值。

const dataKeys = ['open', 'closed', 'waiting']; // 明确指定需要提取的数值键

const graphDataSeries = dataKeys.map(label => ({
    label: label, // 系列名称
    data: source.map(item => item[label]) // 提取每个时间点对应的数值
}));
/*
graphDataSeries 将是：
[
    { label: "open", data: [100, 120, 170] },
    { label: "closed", data: [60, 80, 0] },
    { label: "waiting", data: [12, 75, 34] }
]
*/

3.3 完整代码示例

将上述两部分结合起来，即可得到完整的转换逻辑：

const source = [
    {
        "time": "18th",
        "open": 100,
        "closed": 60,
        "waiting": 12
    },
    {
        "time": "20th",
        "open": 120,
        "closed": 80,
        "waiting": 75
    },
    {
        "time": "22nd",
        "open": 170,
        "closed": 0,
        "waiting": 34
    },
];

const mappedData = {
  // 提取时间轴标签
  time: source.map(item => item.time),
  // 提取并构建图表系列数据
  graphData: ['open', 'closed', 'waiting'] // 明确指定需要转换为图表系列的键
    .map(label => ({
        label: label,
        data: source.map(item => item[label])
    }))
};

console.log(mappedData);
/*
输出结果：
{
    "time": ["18th", "20th", "22nd"],
    "graphData": [
        {
            "label": "open",
            "data": [100, 120, 170]
        },
        {
            "label": "closed",
            "data": [60, 80, 0]
        },
        {
            "label": "waiting",
            "data": [12, 75, 34]
        }
    ]
}
*/

4. 注意事项与扩展

4.1 动态处理数据键

在上述示例中，我们硬编码了 ['open', 'closed', 'waiting'] 作为需要提取的数值键。但在实际应用中，这些键可能不是固定的，或者数据结构可能更复杂。为了更灵活地处理，我们可以从第一个数据对象中动态提取这些键（排除非数值键，如 time）。

const source = [ /* ... */ ];

if (source.length === 0) {
    // 处理空数组情况
    const mappedData = { time: [], graphData: [] };
    console.log(mappedData);
} else {
    // 动态获取数据键（排除 'time' 键）
    const firstItem = source[0];
    const dataKeys = Object.keys(firstItem).filter(key => key !== 'time');

    const mappedData = {
      time: source.map(item => item.time),
      graphData: dataKeys.map(label => ({
          label: label,
          data: source.map(item => item[label])
      }))
    };
    console.log(mappedData);
}

这种方法增加了代码的健壮性和通用性，无论原始数据包含多少个数值指标，都能自动适应。

4.2 性能考量

对于大多数常见的数据量（几百到几千条记录），map 方法的性能是足够的。它会遍历数组几次（一次用于 time，N次用于 graphData，其中N是数值键的数量）。如果数据量非常庞大（例如数万甚至数十万条记录），并且对性能有极致要求，可以考虑一次遍历完成所有数据的提取，减少循环次数。但这会增加代码的复杂性。

例如，一次遍历的思路：

const source = [ /* ... */ ];
const time = [];
const graphDataMap = new Map(); // 使用Map来动态存储每个label的数据数组

if (source.length > 0) {
    const dataKeys = Object.keys(source[0]).filter(key => key !== 'time');
    dataKeys.forEach(key => graphDataMap.set(key, [])); // 初始化每个数据系列的空数组

    source.forEach(item => {
        time.push(item.time);
        dataKeys.forEach(key => {
            graphDataMap.get(key).push(item[key]);
        });
    });
}

const graphData = Array.from(graphDataMap.entries()).map(([label, data]) => ({ label, data }));

const mappedDataOptimized = { time, graphData };
console.log(mappedDataOptimized);

这种优化在数据量极大的情况下可能带来性能优势，但对于一般应用，map 链式调用已经足够清晰和高效。

4.3 健壮性与错误处理

• 空数组处理： 在动态获取 dataKeys 之前，应检查 source 数组是否为空，避免访问 source[0] 导致错误。
• 缺失数据点： 如果原始数据中某个时间点的某个指标值可能缺失（例如 item.open 不存在），item[label] 会返回 undefined。大多数图表库会将其解释为缺失点或0，但您可能需要根据业务需求进行额外的处理，例如用 null 或 0 填充。

5. 总结

将扁平化的对象数组转换为图表库所需的特定格式是前端数据处理的常见任务。通过熟练运用JavaScript的 map 方法，我们可以高效、简洁地完成这种转换。理解原始数据和目标数据结构之间的差异，并掌握如何动态处理数据键，将使您的数据处理逻辑更加灵活和健壮，从而更好地支持复杂的数据可视化需求。

本篇关于《JavaScript数组处理：图表数据格式化技巧》的介绍就到此结束啦，但是学无止境，想要了解学习更多关于文章的相关知识，请关注golang学习网公众号！