上一节模拟了VisActor的子弹图,本节模拟时间轴。以下截图是VisActor官方的样式:
来源:https://visactor.io/vgrammar/demo/animate/timeline
首先分析下这个图表的结构,核心在于两点,大头针样式和高低错落的文字排版。如果在Power BI静态模拟,内置折线图就能搞定。采总在《用Power BI制作时间轴,其实可以很简单》已经描述得很详细。
采总的样式是随着年份逐渐走高,如何进行高低错落?
把折线图Y轴的度量值按年份奇数偶数分别设置不同的值:
如何让时间轴滚动起来?可以利用Play Axis这个视觉对象播放。
使用DAX创建一个笛卡尔积表格,每个索引显示五个年份,显示的年份依次递增一年,比如,索引为0时显示2015-2019年,索引为1时即显示2016-2020年。
事件表和显示顺序表按照年份建立双向关系:
将折线图的X轴年份换为显示顺序表的年份,Play Axis的字段为索引,这样,时间轴就可以不停的滚动了。
当然,这个滚动效果有点卡顿。如果需要比较丝滑,就需要借助SVG动画了,这部分仅在我的知识星球分享。