这是一个星友的提问，如何制作不等宽图表？常用来两个指标对比，一个度量值使用SVG模式实现，以不等宽条形图为例：
上图的功能：
1.横向条形长度代表业绩，宽度代表业绩达成率，双数据标签。
2.分割线为中位线，并标记中位值。
3.按照达成率不同，条形颜色透明度不同。
4.类别标签间距也是不等的，随宽度移动。
每一环节设置逻辑已在以下度量值说明。可按照此模式自行变更指标，或变更分割线，或转置方向为柱形图。度量值放在HTML content视觉对象进行显示。
代码语言：javascript复制不等宽条形图 =
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
