近期有多个团队之间进行绩效比拼, 思考了下如何通过一张图来既展示业务数据, 又显示比较结果?
情况大致是这样的: 张三李四宋五赵六王二麻子是一组好基友.
这一天, 几个相约做起了一个游戏, 规则是: 选择对手进行比赛, 胜者累计1分, 负者不计分. 以最后的得分相比, 得出胜负.
为了展示两两对赛的关系, 和胜负的结果, 作此图:
源码已传至Github
构图处理思路是:
1. 以圆点表示个体
2. 以连线表示两者间对比关系
3. 以mark表示两者间的胜负关系
4. 数字标签
首先, 想到是用百度的echarts来实现, 关系图基本能实现两两之间的关系, 但胜负和数据值处理未找到合适的办法. 再者, 用D3.js来处理, 因为自己不太熟悉语法, 未曾尝试.
前几年曾看过一些SVG相关语法, 依稀尚有印象, 感觉以上几点并不算复杂, 于是乎想到用原生语法来画图.
作图涉及内容点:
1. svg标记语言: circle, path, text, 主要在于理解坐标系的概念, 通过函数运算或偏移得到坐标点.
2. jinja模版语法
领取专属 10元无门槛券
私享最新 技术干货