本号已经使用DAX SVG在Power BI自定义了几十种实用的图表,但是一直没有涉及折线图。原因有二:
1. 内置的折线图已经足够使用,迷你图近期开始也有了折线图功能。
2. 网上国内外均已经有人分享了SVG的折线图度量值 。
因此感觉没必要重复造轮子。直到前两天,有网友联系我,希望折线图可以实现按指定规则突出标注。我觉得有必要单独开一篇解决这个问题,这也有很大的业务价值。下图是Power BI内置折线图、内置迷你折线图和使用DAX度量值生成的折线图对比。
内置折线图进行了全局圆点标记;内置迷你图标记了最高点和最低点,但是颜色一样;DAX生成的折线图标记了最高点和最低点,同时带有类别标签、数据标签,并且颜色区分显示。实际业务中,使用DAX的方式你可以特殊标注任意想要标注的内容,再举例个节日:
下面分享标记最高值和最低值的度量值,把其中的指标替换为你模型中的实际指标即可使用。
代码语言:javascript复制特殊标注折线图 =
VAR XMinDate =
MINX ( ALLSELECTED ( '表'[Date] ), '表'[Date] )
VAR XMaxDate =
MAXX ( ALLSELECTED ( '表'[Date] ), '表'[Date] )
VAR MaxWidth =
INT ( XMaxDate - XMinDate ) //图表的宽度
VAR MaxHeight = MaxWidth / 2 //图表的高度
VAR Space_X = MaxWidth * 0.1
VAR Space_Y = MaxHeight * 0.1
VAR Label_Size = MaxWidth / 30
VAR Mark_r = MaxWidth / 60
VAR Line_stroke = MaxWidth / 100
VAR YMinValue =
MINX ( ALLSELECTED ( '表'[Date] ), [指标] )
VAR YMaxValue =
MAXX ( ALLSELECTED ( '表'[Date] ), [指标] )
VAR SVG_Table =
ADDCOLUMNS (
'表',
"X", INT ( [Date] - XMinDate ),
"Y",
MaxHeight
* DIVIDE ( [指标] - YMinValue, YMaxValue - YMinValue ),
"MarkColor",
IF ( [指标] = YMinValue, "Tomato", IF ( [指标] = YMaxValue, "DarkCyan", BLANK () ) )
) //内置标记最高值最低值,实际可替换为任意想标记的值
VAR Lines =
CONCATENATEX ( SVG_Table, [X] & "," & MaxHeight - [Y], " ", [Date] ) //把线段连接到一起
VAR Marks =
CONCATENATEX (
FILTER ( SVG_Table, [MarkColor] <> BLANK () ),
"<circle cx='" & [X] & "' cy='" & MaxHeight - [Y] & "' r='" & Mark_r & "' fill='" & [MarkColor] & "'/>"
)
VAR Labels =
CONCATENATEX (
FILTER ( SVG_Table, [MarkColor] <> BLANK () ),
"<text x='" & [X] Mark_r & "' y='" & MaxHeight - [Y] 3 * Mark_r & "' text-anchor='middle' font-size='" & Label_Size & "' fill='" & [MarkColor] & "'>"
& FORMAT ( [Date], "YYYY/MM/DD" ) & "[" & [指标] & "]</text>"
) //把数据标签连接到一起
VAR SVG = "data:image/svg xml;utf8," & "<svg xmlns='http://www.w3.org/2000/svg' x='0' y='0' width='" & MaxWidth & "' height='" & MaxHeight & "' viewBox='" & - Space_X & " " & - Space_Y & " " & MaxWidth Space_X * 2 & " " & MaxHeight Space_Y * 2 & "'>" & "<!--微信公众号、知乎:wujunmin-->" & "<polyline fill='none' stroke='LightGrey' stroke-width='" & Line_stroke & "' points='" & Lines & "'/>" & Marks & Labels & "</svg>"
RETURN
SVG