PowerApps│SVGでさらに融通の利く棒グラフを作成する方法

前回の記事ではGalleryコントロールと四角形を使って様々な棒グラフを作成しました。

関連記事PowerApps│融通の利く棒グラフを作成する方法

2022.02.06

この手法で大抵の問題は解決するのですが、さらに一歩進んで四角形の代わりにSVGを使って棒グラフを作成します。

SVGを使う利点は次の３点です。

サイズ変更に即対応
角度やサイズのバリエーションが豊富
動く！

はい、３点目でなんだかワクワクしてきませんか？

これ、動かすことができるんですよ。

アプリの標準機能で動かそうとするとTimerコントロールと組み合わせる必要があるので、結構煩雑です。

例えば棒グラフが下からにょきにょき生えてくるとか、徐々に表れてくるとか工夫と設定次第で思いのままです。

そんな期待を胸に秘め、基本からアニメーションまで紹介していきます。

以降、コピペできるコードはサンプルコレクションの使用を想定しています。うまく動作しない場合は調整してください。サンプルコレクションを使う場合は、下記記事にある_TimeSeriesCollection01と_TimeSeriesCollection02を適当なButtonコントロールにコピペし、実行してください。

01│GalleryコントロールとSVGで棒グラフを作成

まず、下図の部分についてGalleryコントロールを３つ並べています。

上から、会社切替用のGallery00、棒グラフ描写用Gallery01、Ｘ軸目盛用Gallery02です。

会社切替用（Gallery00）

Galleryコントロールを600×200、TemplateSizeは50で作成します。
Items=Filter(_TimeSeriesCollection02,Element=Gallery1.Selected.Element)
Labelコントロールをひとつ作成します。
Text=ThisItem.Element&”社”
適当な色を付けた四角形をひとつ作成し、最背面に設置します。
Visible=ThisItem.IsSelected //選択時のみ表示

棒グラフ描写用（Gallery01）

Galleryコントロールを600×200、TemplateSizeは50で作成します。今回は省略していますが、必要に応じて外側にグラフタイトルやＹ軸目盛、単位などをLabelコントロールで表示させてください。
Items=Filter(_TimeSeriesCollection02,Element=Gallery00.Selected.Element)
Galleryコントロールの表示をToggleコントロールで操作したい場合
Visible=Toggle02.Value
Galleryコントロールの中にImageコントロールを50×200で作成します。
ImageコントロールのImageは下記をコピペしてください。

"data:image/svg+xml,"& 
EncodeUrl(
"<svg viewBox='0 0 "&Self.Width&" "&Self.Height&"' xmlns='http://www.w3.org/2000/svg'>
    <rect x='10' y='"&Self.Height-ThisItem.Value&"' width='30' height='"&ThisItem.Value+10&"' rx='5' fill='#ff9999' />
    <rect x='5' width='40' fill='RGBA(255, 255, 255, 1)'>
        <animate attributeName='height' values='"&Self.Height&";0' dur='3s' repeatCount='0' />
    </rect>
</svg>")

<animate>タグで動かしていますね。attributeNameで変化させる要素を、valuesで変化量を、durでアニメーションする時間を設定しています。

Ｘ軸目盛用（Gallery02）

Galleryコントロールを600×50、TemplateSizeは50で作成します。
Items=ForAll(Sequence(12),Value)
Labelコントロールをひとつ作成します。
Text=Text(ThisItem.Value,”00月”)
四角形をＸ軸境界線用に50×1、Y=0でひとつ作成します。

ここまでで動く棒グラフを作成できました。動くとわくわくしますよね。

キャッシュの関係か、一部または全部がアニメーションしないことがあります。
原因が判明次第、追記します。

02│Imageコントロール（SVG）のみで折れ線グラフを作成

続いて折れ線グラフを作成してみます。

Galleryコントロールでは表現が難しいのでImageコントロールのみで作ります。

折れ線グラフ描写用（Image01）

Imageコントロールを600×200で作成します。位置は先ほどのGallery01に重ねます。
Imageコントロールの表示をToggleコントロールで操作したい場合
Visible=Toggle01.Value
Imageは下記をコピペします。ギャラリーと異なり反復できないので座標すべて指定します。

"data:image/svg+xml,"& 
EncodeUrl(
"<svg viewBox='0 0 "&Self.Width&" "&Self.Height&"' xmlns='http://www.w3.org/2000/svg'>
  <polyline points='25,"&Self.Height-Gallery00.Selected.Value1&" 75,"&Self.Height-Gallery00.Selected.Value2&" 125,"&Self.Height-Gallery00.Selected.Value3&"
  175,"&Self.Height-Gallery00.Selected.Value4&" 225,"&Self.Height-Gallery00.Selected.Value5&" 275,"&Self.Height-Gallery00.Selected.Value6&"
  325,"&Self.Height-Gallery00.Selected.Value7&" 375,"&Self.Height-Gallery00.Selected.Value8&" 425,"&Self.Height-Gallery00.Selected.Value9&"
  475,"&Self.Height-Gallery00.Selected.Value10&" 525,"&Self.Height-Gallery00.Selected.Value11&" 575,"&Self.Height-Gallery00.Selected.Value12&"
  ' 
  stroke='#0000FF' stroke-width='5'  fill='none' />
</svg>")

ここまでで動かない折れ線グラフを作成できました。動かないと寂しいですね。

なお、棒グラフも地道に座標を設定すればImageコントロールひとつで表現できます。

どちらが良いかは決めかねますが、それぞれの手法を使えるようになれば応用力が高まりますね。

03│Imageコントロール（SVG）のみで円グラフを作成

円グラフは後日追加します。

最後に円グラフを作成します。

こちらもImageコントロールのみで作ります。

使用するサンプルコレクションは

ClearCollect(_CircleGraph,{ID:1,Label:”くだもの”,a:55,b:20,c:15,d:10});

です。

円グラフ描写用（Image09）

Imageコントロールを150×150で作成します。
Imageは下記をコピペします。

円グラフ用コード

"data:image/svg+xml,"& 
EncodeUrl(
    "<svg viewBox='0 0 64 64' xmlns='http://www.w3.org/2000/svg'>
        <circle cx='32' cy='32' r='16' fill='rgba(0,0,0,0)'
        stroke='RGBA(0, 134, 208, 1)' stroke-width='32' stroke-dashoffset='25'
        stroke-dasharray=
        '"&First(_CircleGraph).a&",
        "&100-First(_CircleGraph).a&"'
        />

        <circle cx='32' cy='32' r='16' fill='rgba(0,0,0,0)'
        stroke='RGBA(246, 88, 16, 1)' stroke-width='32' stroke-dashoffset='25'
        stroke-dasharray=
        '0,
        "&First(_CircleGraph).a&",
        "&First(_CircleGraph).b&",
        "&100-First(_CircleGraph).a-First(_CircleGraph).b&"'
        />

        <circle cx='32' cy='32' r='16' fill='rgba(0,0,0,0)'
        stroke='RGBA(141, 198, 63, 1)' stroke-width='32' stroke-dashoffset='25'
        stroke-dasharray=
        '0,
        "&First(_CircleGraph).a+First(_CircleGraph).b&",
        "&First(_CircleGraph).c&",
        "&100-First(_CircleGraph).a-First(_CircleGraph).b-First(_CircleGraph).c&"'
        />

        <circle cx='32' cy='32' r='16' fill='rgba(0,0,0,0)'
        stroke='RGBA(168, 0, 0, 1)' stroke-width='32' stroke-dashoffset='25'
        stroke-dasharray=
        '0,
        "&First(_CircleGraph).a+First(_CircleGraph).b+First(_CircleGraph).c&",
        "&First(_CircleGraph).d&",
        0'
        />
        <circle cx='32' cy='32' r='20' fill='rgba(255,255,255,1)'/>
        <circle cx='32' cy='32' r='0' fill='rgba(255,255,255,1)'>
            <animate attributeName='r' values='40;0;' dur='3s' repeatCount='0' />
        </circle>
        <text x='16' y='34' fill='#999999' font-size='8' text-anchor='Right'>くだもの</text>

</svg>"
)

少しだけ動く円グラフを作成できました。やっぱり動くとわくわくしますね。

今回はドーナツ型にして、中心にテキストを入れました。

工夫次第でバリエーションも思いのままです。