偶然间在网上看到一个研发费用图表,同时显示了各大公司的研发花费以及研发费用占营收的比例。个人认为这个图表非常实用,可以广泛应用于零售业各环节。比如,店铺销售排行榜和对公司的整体业绩贡献,产品销售排行榜和毛利贡献……
以下是Power BI的模拟效果。为了节约画布空间,对原图进行了少许优化:将占比直接显示在圆形气泡上。
可以应用到商品管理领域:
这个图表可以使用DAX一个度量值生成。在写度量值之前,我们需要庖丁解牛般分解该图表的元素。
该图表的主体部分从左往右分为6大块:公司Logo、条形、绝对值数据标签、直线、气泡、占比数据标签。
公司Logo可以在度量值中使用image标签,条形使用rect标签,直线使用line标签,数据标签使用text标签,气泡使用circle标签。
完整度量值如下,将该度量值放入视觉对象HTML Conten正常显示,将度量值中的[value]和[value%]替换为你的模型指标,可以复用。
代码语言:javascript复制绝对值占比组合图 =
//logo20像素宽,条形100像素宽,直线长度150像素,上下间距18像素,圆圈最大半径6像素
VAR ItemCount =
DISTINCTCOUNT ( 'Table'[公司] )
VAR MaxValue =
MAXX ( VALUES ( 'Table'[公司] ), [Value] )
VAR MaxPercent =
MAXX ( VALUES ( 'Table'[公司] ), [Value%] )
VAR BarTable =
ADDCOLUMNS (
SUMMARIZE (
'Table',
'Table'[公司],
'Table'[logo],
"Index", RANKX ( ALLSELECTED ( 'Table' ), [Value] )
),
"Image",//画logo
"<image xlink:href='" & [logo] & "' x='0' y='" & ( [Index] - 1 ) * 18 & "' width='19' height='12'/>",
"Rect",//画条形
"<rect x='20' y='" & ( [Index] - 1 ) * 18 & "' width='" & 100 * [Value] / MaxValue & "' height='12' fill='CornflowerBlue'/>",
"Text",//画绝对值数据标签
"<text x='" & 20 100 * [Value] / MaxValue - 1 & "' y='" & ( [Index] - 1 ) * 18 8 & "' text-anchor='end' font-size='6' >"
& ROUND ( [Value], 1 ) & "</text>",
"Line",//画连接横线
"<Line x1='20' y1='" & ( [Index] - 1 ) * 18 6 & "' x2='170' y2='" & ( [Index] - 1 ) * 18 6 & "' stroke='Grey' stroke-width='0.1'/>",
"Circle",//画气泡
"<Circle cx='170' cy='" & ( [Index] - 1 ) * 18 6 & "' r='"
& SQRT ( 36 * [Value%] / MaxPercent ) & "' fill='CornflowerBlue' fill-opacity='0.95'/>",
"Label%",//画占比数据标签 公众号:wujunmin
"<text x='170' y='" & ( [Index] - 1 ) * 18 7 & "' text-anchor='middle' font-size='4' >"
& ROUND ( [Value%] * 100, 0 ) & "%</text>"
)
VAR Bar =
CONCATENATEX (
BarTable,
[Line] & [Rect] & [Text] & [Image] & [Circle] & [Label%]
)
VAR SVG = "<svg xmlns='http://www.w3.org/2000/svg' viewbox='0 0 176 " & 18 * ItemCount & "'>" & Bar & "</svg>"
RETURN
SVG