如何标准化两个Hash使其包含相同键以适配Highcharts多系列图表

嘿，这个问题我之前做类似图表的时候也碰到过！要避免两个哈希因为月份键不统一导致绘图错位，关键就是先把所有涉及的月份键整合出一个完整集合，再给两个哈希补全缺失的键，填充无数据的占位值就行。下面以Ruby为例给你具体步骤：

步骤1：获取完整的月份键集合 #

首先把两个哈希里的所有键合并，去重后排序（保证月份按顺序来，比如4=四月、5=五月这样升序）：

# 合并两个哈希的键，去重并排序得到完整月份列表
all_month_keys = (first.keys + second.keys).uniq.sort

步骤2：标准化第一个哈希 #

遍历完整的月份键列表，确保每个键都存在于第一个哈希中，不存在的话就填充一个无数据的占位（比如空数组，Highcharts识别空数组会自动处理成无数据的点）：

standardized_first = all_month_keys.each_with_object({}) do |month_key, result_hash|
  # 用fetch方法，有键就取对应值，没有就返回默认的空数组
  result_hash[month_key] = first.fetch(month_key, [])
end

步骤3：用同样方法标准化第二个哈希 #

对第二个哈希做完全一样的处理：

standardized_second = all_month_keys.each_with_object({}) do |month_key, result_hash|
  result_hash[month_key] = second.fetch(month_key, [])
end

自定义无数据标记（可选） #

如果你想和你示例里一样用[no data]作为占位（不过Highcharts绘图时更推荐用空数组，不会影响渲染），只要把默认值改成['no data']就行：

result_hash[month_key] = first.fetch(month_key, ['no data'])

效果验证 #

处理完之后，两个哈希就会拥有完全相同的月份键啦！比如：

• 如果first原本没有4月的键，标准化后standardized_first[4]就是空数组（或你自定义的标记）
• 如果second原本没有6月的键，标准化后standardized_second[6]也会被补全占位值

这样再把两个标准化后的哈希传入Highcharts，每个月份对应的系列数据就会精准对应，再也不会出现错位的情况了！

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