Highcharts如何基于给定JSON实现带totalCount折线的堆叠柱状图

原始JSON本身有两个容易踩坑的点，必须先处理完再画图：

• 把所有数据项扫一遍，把除了hour、totalCount之外的业务字段全部挑出来去重，攒出全量的业务系列清单。就拿给的样例数据来说，最后能攒出TD、TE、TI、TLI、TR、FINGERVERIFY、LI、TLIP、LIP、LLI、LLIP、LR、LRP、FE一共14个独立业务字段，这些就是堆叠柱的每一层
• 把所有原来存成字符串的数值字段全部转成数字，比如原来的"2"转成2，不然字符串没法用来算柱高、映射坐标
• 给每个X轴点位（也就是每个hour值）对齐全量业务数值：某个小时的记录里没有出现某个业务字段的话，就给这个位置的这个字段补0，不然同个业务层的柱体在有数据的位置会突然跳高度，堆出来的柱是歪的
• 单独把折线要用的数据抽出来：X轴就用每个记录的hour值，Y轴就用转成数字后的totalCount，提前把每个节点要显示的文本存好，就是对应的totalCount数值

按照要求的规则配置完就能出对应效果：

• X轴选类目轴，刻度值直接用清洗后的所有hour值，保证每个时间点和数据位置完全对应
• 堆叠柱部分：把刚才攒的每一个业务字段做成独立的柱形系列，给所有柱形系列打上同一个堆叠标记，让同个X位置的柱体从上到下堆起来，每一层的高度就对应该业务字段在这个小时的数值
• 叠加的折线部分：单独加一个折线系列，绑定之前抽好的totalCount数据集，打开节点标签显示，让每个折线上的点直接把对应的totalCount数值显示出来；折线选和柱体不一样的醒目颜色，把节点标记稍微放大点，别和柱体混在一起看不清
• Y轴选连续数值轴，自动根据所有堆叠柱的最高总高度、折线的最大值调整刻度范围，不会出现内容出界的问题

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