股市震荡，Power BI这么展示

wujunmin

发布于 2025-04-09 05:43:11

8600

代码可运行

文章被收录于专栏：wujunminwujunmin

运行总次数：0

代码可运行

下图是支付宝的股市涨跌分布图，昨天是魔幻的一天。

图表中的卡片和柱形图都很常规，最下方的百分比堆积条形图有点特色。Power BI使用DAX可以轻松模拟，以下是我模拟的四种样式：

如果在内置视觉对象展示可以使用SVG形状，如果是HTML Content视觉对象展示，可以给一个<div>填充渐变背景，背景分为三个色块，色块大小随数据变化。

以下是第三种效果度量值，把度量值放入HTML Content的Values区域展示：

度量值 = 
VAR _left = 366
VAR _middle = 50
VAR _right = 298
--以上数据自定义
VAR _total = _left + _middle + _right
VAR left_percent = _left/_total * 100
VAR middle_percent = _middle/_total * 100
VAR right_percent = _right/_total * 100
VAR gap_size = 2
VAR stop1 = left_percent - gap_size/2
VAR stop2 = left_percent + gap_size/2
VAR stop3 = left_percent + middle_percent - gap_size/2
VAR stop4 = left_percent + middle_percent + gap_size/2
VAR gap_color = "white"
RETURN
"
<head>
    <style>
        .chart-container {
            display: flex;
            align-items: center;
            width: 100%;
            max-width: 600px;
            margin: 20px auto;
            font-family: Arial, sans-serif;
        }
        
        .label-left {
            color: #ff0000;
            font-weight: bold;
            margin-right: 10px;
        }
        
        .label-right {
            color: #00aa00;
            font-weight: bold;
            margin-left: 10px;
        }
        
        .bar {
            height: 20px;
            width: 100%;
            border-radius: 10px;
            position: relative;
            overflow: hidden;
            background-color: white; 
        }
        
        .gradient-bar {
            height: 100%;
            background: linear-gradient(
                135deg,
                #ff0000 0%, 
                #ff0000 " & stop1 & "%, 
                " & gap_color & " " & stop1 & "%, 
                " & gap_color & " " & stop2 & "%, 
                lightgrey " & stop2 & "%, 
                lightgrey " & stop3 & "%, 
                " & gap_color & " " & stop3 & "%, 
                " & gap_color & " " & stop4 & "%, 
                #00aa00 " & stop4 & "%, 
                #00aa00 100%
            );
            display: flex;
            align-items: center;
            justify-content: space-between;
        }
        
        .percentage-label {
            color: white;
            font-weight: bold;
            font-size: 14px;
            padding: 0 8px;
            text-shadow: 1px 1px 2px rgba(0,0,0,0.5);
        }
    </style>
</head>
<body>
    <div class='chart-container'>
        <div class='label-left'>▲" & _left & "</div>  
        <div class='bar'>
            <div class='gradient-bar'>
                <div class='percentage-label'>" & FORMAT(_left/_total,"0.0%") & "</div>
                <div class='percentage-label'>" & FORMAT(_right/_total,"0.0%") & "</div>
            </div>
        </div>
        <div class='label-right'>" & _right & "▼</div>
    </div>
</body>"