1. 原始数据结构分析
在数据可视化领域，我们经常会遇到以数组对象形式存储的时序数据。例如，以下结构表示了不同时间点上“open”、“closed”和“waiting”三个指标的值：
[
{
"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. 目标数据结构解析
为了更好地适配动态图表库，我们可能需要将上述数据转换为以下结构：
{
"time": ["18th", "20th", "22nd"],
"graphData": [
{
"label": "open",
"data": [100, 120, 170],
},
{
"label": "closed",
"data": [60, 80, 0],
},
{
"label": "waiting",
"data": [12, 75, 34],
}
]
}这种目标结构将时间轴数据（time数组）与各个数据系列（graphData数组）清晰地分离。graphData中的每个对象代表一个图表系列，包含其标签（label）和对应的数据点数组（data）。这种“按列”组织数据的方式，对于许多图表库来说，更便于渲染多系列图表。
3. 实现数据转换
我们可以利用JavaScript的数组方法，特别是Array.prototype.map()，高效地完成这一转换。
立即学习“Java免费学习笔记（深入）”；
3.1 提取时间轴数据
首先，我们需要从原始数据中提取所有的time值，并将其组织成一个数组。这可以通过对原始数组进行一次map操作实现：
const sourceData = [ /* ... 原始数据 ... */ ]; const timeLabels = sourceData.map(item => item.time); // timeLabels 将是 ["18th", "20th", "22nd"]
3.2 构建图表系列数据
接下来，我们需要构建graphData数组。这个数组的每个元素都是一个对象，包含label和data。label对应于原始数据中的指标名称（如“open”、“closed”、“waiting”），而data则是该指标在所有时间点上的值集合。
我们可以预定义一个包含所有指标名称的数组，然后对这个数组进行map操作。在每次map迭代中，我们创建一个新的对象，其label是当前指标名，data则通过再次对sourceData进行map操作来提取对应指标的所有值。
const metricLabels = ['open', 'closed', 'waiting']; // 预定义指标名称
const graphSeries = metricLabels.map(label => ({
label: label,
data: sourceData.map(item => item[label]) // 使用动态键访问
}));
/*
graphSeries 将是：
[
{ 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 transformedData = {
time: source.map(item => item.time), // 提取时间轴数据
graphData: ['open', 'closed', 'waiting'] // 预定义指标键
.map(label => ({
label, // 简化写法，等同于 label: label
data: source.map(item => item[label]) // 提取每个指标的数据系列
}))
};
console.log(transformedData);运行上述代码将输出期望的目标数据结构。
4. 注意事项与优化
-
动态获取指标键： 在上述示例中，我们硬编码了['open', 'closed', 'waiting']。如果指标键是动态变化的，或者不确定，可以从原始数据的第一个对象中动态提取键名（排除time键）：
const firstItem = source[0]; const dynamicMetricLabels = Object.keys(firstItem).filter(key => key !== 'time'); // 然后将 dynamicMetricLabels 用于 map 操作
数据量考量： 对于非常大的数据集，虽然map操作通常效率很高，但嵌套的map操作会增加遍历次数。然而，对于大多数前端应用中的图表数据量，这种方法的性能通常是可接受的。
通用性： 这种转换模式非常通用，可以应用于任何需要将“行式”数据转换为“列式”数据以适应特定API（如图表库）的场景。
5. 总结
通过巧妙地运用Array.prototype.map()等JavaScript数组方法，我们可以高效、清晰地将复杂的数据结构进行转换，以满足特定应用（如动态图表渲染）的需求。这种数据重塑能力是前端开发中处理和展示数据的关键技能，它不仅提高了代码的灵活性和可维护性，也使得与各种第三方库的集成变得更加顺畅。理解并掌握这类数据转换技巧，对于构建高性能、可扩展的Web应用至关重要。
