双指标比较的一种另类方式

wujunmin

发布于 2022-02-09 08:45:58

7200

文章被收录于专栏：wujunminwujunmin

这是一个星友的提问，如何制作不等宽图表？常用来两个指标对比，一个度量值使用SVG模式实现，以不等宽条形图为例：

上图的功能：

1.横向条形长度代表业绩，宽度代表业绩达成率，双数据标签。

2.分割线为中位线，并标记中位值。

3.按照达成率不同，条形颜色透明度不同。

4.类别标签间距也是不等的，随宽度移动。

每一环节设置逻辑已在以下度量值说明。可按照此模式自行变更指标，或变更分割线，或转置方向为柱形图。度量值放在HTML content视觉对象进行显示。

不等宽条形图 = 
VAR MaxSales =
    MAXX ( VALUES ( '表'[店铺] ), [实际] )//计算条形长度
VAR MaxRate =
    MAXX ( VALUES ( '表'[店铺] ), [达成率] )//计算条形颜色透明度
VAR MinRate =
    MINX ( VALUES ( '表'[店铺] ), [达成率] )//计算条形宽度
VAR MedianSales=MEDIANX(VALUES('表'[店铺]),[实际])//中线分割
VAR Height =
    SUMX ( '表', 12 * [达成率] / MinRate ) //最低的柱子为12个像素，合计为图表总高度
VAR t =
    SUMMARIZE ( '表', '表'[店铺], "索引", RANKX ( ALLSELECTED ( '表' ), [实际],,, DENSE ) )
//设置索引
VAR tPlus =
    ADDCOLUMNS (
        t,
"滚动达成", SUMX ( FILTER ( t, EARLIER ( [索引] ) >= [索引] ), [达成率] ) //判断垂直位置
    )
VAR BarTable =
    ADDCOLUMNS (
        tPlus,
"Rect",
"<rect  x='20' y='" & 12 * ( [滚动达成] - [达成率] ) / MinRate & "' width='" & 200 * [实际] / MaxSales & "' height='" & 12 * [达成率] / MinRate & "' fill='Darkcyan' fill-opacity='" & [达成率] / MaxRate & " '/>",
//最大宽度200像素
"Text",
"<text x='18' y='" & 12 * ( [滚动达成] - [达成率] ) / MinRate + 12 * [达成率] / MinRate / 2 & "'  text-anchor='end' dominant-baseline='middle' font-size='6' >" & [店铺] & "</text>",
//类别标签预留了18个像素，如标签较长需调整
"Label1",
"<text x='" & 21 + 200 * [实际] / MaxSales & "' y='" & 12 * ( [滚动达成] - [达成率] ) / MinRate + 12 * [达成率] / MinRate / 2 & "'  text-anchor='left' dominant-baseline='middle' font-size='6' text-Length='20' >"
//指标1数据标签
                & ROUND ( [实际] / 1000, 0 ) & "</text>",
"Label2",
"<text x='" & 21 + 200 * [实际] / MaxSales/2 & "' y='" & 12 * ( [滚动达成] - [达成率] ) / MinRate + 12 * [达成率] / MinRate / 2 & "'  text-anchor='Middle' dominant-baseline='middle' font-size='6'>"
                & ROUND ( [达成率]*100, 0 ) & "%</text>"
//指标2数据标签
    )
VAR SVG = 
"<svg xmlns='http://www.w3.org/2000/svg' viewbox='0 0 241 " & Height & "' >" & 
    CONCATENATEX ( BarTable, [Rect] & [Text]  ) & //连接所有条形和类别标签
//width 241指18个像素的类别标签+2个像素的空白+200个像素的图形+20个像素的数据标签+1个像素的空白
"<line x1='"&20+200 * MedianSales / MaxSales&"' y1='0'  x2='"&20+200 * MedianSales / MaxSales&"' y2='"&Height&"' stroke='black' stroke-width='0.5' stroke-dasharray='2,1'/>
    <text x='" &20+200 * MedianSales / MaxSales+1& "' y='" & Height-2 & "'  text-anchor='Start'  font-size='4' fill='Tomato'>"& "中位值："&ROUND (MedianSales/ 1000, 0 ) & "</text>"&
//中位线位置和标签
    CONCATENATEX ( BarTable,  [Label1]&[Label2] )&//连接所有数据标签
"</svg>"
RETURN
    SVG

本文参与腾讯云自媒体同步曝光计划，分享自微信公众号。

原始发表：2022-01-12，如有侵权请联系 cloudcommunity@tencent.com 删除

html