May 11, 2025 1 min to read

コピペでOK！ Power Apps のスライダーで動かせるドーナツグラフ（ドーナツゲージ）

概要

#PowerApps
SVG のドーナツグラフ pic.twitter.com/VCEqsQSoyi
— たく丸 (@taku_ma_ru) May 12, 2025

そのままコピペで利用できるSVGのドーナツグラフです。スライダーで動かせる形にしていますので、ご自由にお使いください。 本コードの使用に関しては、いかなる責任も負いかねますので、あらかじめご了承ください。

YAML コード

Power Apps で利用するためのページ単位の YAML コードです。

Screens:
  Screen1:
    Children:
      - Image2_1:
          Control: Image@2.2.3
          Properties:
            Height: =474
            Image: |-
              ="data:image/svg+xml,"& EncodeUrl($"
              <svg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg' style='background-color: white;'>
                <circle cx='100' cy='100' r='90' fill='none' stroke='#e0e0e0' stroke-width='20'/>

                <circle id='progress-circle'
                        cx='100' cy='100' r='90'
                        fill='none'
                        stroke='#ff0000'
                        stroke-width='20'
                        stroke-linecap='round'  pathLength='100'        stroke-dasharray='100'  stroke-dashoffset='{100-Slider1.Value}'  transform='rotate(-90 100 100)' />

                <text x='100' y='110' text-anchor='middle' font-size='40' font-weight='bold' fill='black'>
                  <tspan id='percentage-text'>{Slider1.Value}</tspan>
                  <tspan font-size='20'>%</tspan>
                </text>
              </svg>

              ")
            Width: =474
            X: =72
            Y: =279
      - Slider1:
          Control: Classic/Slider@2.1.0
          Properties:
            X: =39
            Y: =951