Power BI 内置视觉对象实现蛇形S形时间轴图表

wujunmin

发布于 2025-05-27 01:40:38

6900

代码可运行

文章被收录于专栏：wujunminwujunmin

运行总次数：0

代码可运行

效果如下：

以上使用内置按钮切片器视觉对象实现。将日期字段放入按钮切片器，选择网格布局，可以看到每一行都是从小到大的日期顺序，而上图的偶数行是逆序的，从而形成S形结构。

所以要对默认的排序规则进行调整，假设每行显示四列，新建排序度量值：

M.DateIndex = 
VAR _Columns = 4 --定义显示多少列
VAR DateRank =
    ROWNUMBER ( ALLSELECTED ( '日期表'[Date] ), ORDERBY ( [Date], ASC ) )
VAR GroupNumber =
    INT ( ( DateRank - 1 ) / _Columns )
VAR PositionInGroup =
    MOD ( DateRank - 1, _Columns ) + 1
RETURN
    IF (
        MOD ( GroupNumber, 2 ) = 1,
        GroupNumber * _Columns + ( _Columns - PositionInGroup + 1 ),
        GroupNumber * _Columns + PositionInGroup
    )

放入表格可以看到第二行实现了逆序排序：

把排序度量值放入按钮切片器的工具提示，并按工具提示字段排序，可以看到日期顺序顺利变为S形。

接着添加圆点和虚线装饰，新建以下SVG度量值：

SVG.S.4 = 
VAR _Columns = 4 --定义显示多少列
VAR _Rows =
    ROUNDUP ( COUNTROWS ( ALLSELECTED ( '日期表'[Date] ) ) / _Columns, 0 )
VAR DateRank =
    ROWNUMBER ( ALLSELECTED ( '日期表'[Date] ), ORDERBY ( [Date], ASC ) )
VAR PositionInGroup =
    MOD ( DateRank - 1, _Columns ) + 1
VAR GroupNumber =
    INT ( ( DateRank - 1 ) / _Columns )
VAR _PathY =
    SWITCH (
        TRUE (),
        GroupNumber < _Rows - 1
            && PositionInGroup = _Columns, "M100 15 100 30",
        GroupNumber > 0
            && PositionInGroup = 1, "M100 15 100 0"
    )
VAR _PathX =
    SWITCH (
        PositionInGroup,
        1, IF ( MOD ( GroupNumber, 2 ) = 0, "M100 15L200 15", "M0 15L100 15" ),
        _Columns, IF ( MOD ( GroupNumber, 2 ) = 0, "M100 15L0 15", "M100 15L200 15" ),
        "M0 15L200 15"
    )
RETURN
"data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' id='wujunmin' width='200' height='30'>
    <path d='" & _PathX & _PathY & "' stroke='lightgrey' stroke-width='1' stroke-dasharray='2' fill='none'/>
    <rect rx='2.5' x='97.5' y='12.5' height='5' width='5'  fill='deepskyblue'/>
    <!--公众号:wujunmin-->
</svg>"