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

七草あんこ

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

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

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

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

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

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

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

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

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

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

Scalable Vector Graphics(スケーラブル・ベクター・グラフィックス、SVG)は、XMLベースの、2次元ベクターイメージ用の画像形式の1つである。アニメーションやユーザインタラクションもサポートしている。

引用元:Scalable Vector Graphics – Wikipedia

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

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

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

会社切替用(Gallery00)

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

棒グラフ描写用(Gallery01)

  1. Galleryコントロール600×200、TemplateSizeは50で作成します。今回は省略していますが、必要に応じて外側にグラフタイトルやY軸目盛、単位などをLabelコントロールで表示させてください。
    Items=Filter(_TimeSeriesCollection02,Element=Gallery00.Selected.Element)
  2. Galleryコントロールの表示をToggleコントロールで操作したい場合
    Visible=Toggle02.Value
  3. Galleryコントロールの中にImageコントロール50×200で作成します。
  4. 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でアニメーションする時間を設定しています。

X軸目盛用(Gallery02)

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

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

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

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

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

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

折れ線グラフ描写用(Image01)

  1. Imageコントロール600×200で作成します。位置は先ほどのGallery01に重ねます。
  2. Imageコントロールの表示をToggleコントロールで操作したい場合
    Visible=Toggle01.Value
  3. 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)

  1. Imageコントロール150×150で作成します。
  2. 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>"
)

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

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

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

04│まとめ

SVGは万能とまで言えませんが、表現できる幅がとてつもなく広がります。

応用すればパレート図や散布図も作れそうです。

要望や不明点はどしどしコメントください。Twitterでも受け付けています。

また、試して成功したら紹介しますね。

ご支援よろしくおねがいします

この記事を気に入ってくださった方、寄付してあげてもいいよという方がいらっしゃっいましたら、ご支援いただけると助かります。

下記リンクからAmazonギフト券で、金額は15円からお気持ちを入力してください。

受取人のメールアドレスは amazon@anko7793.com までお願いします。

メッセージもいただけるとたいへん喜びます。

よろしくお願いします。

Amazonギフト券(Eメールタイプ) 

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

ABOUT US
七草あんこ
非IT系中間管理職やってます。社命によりoffice365を主軸とした業務改善プロジェクトメンバーに任命されたことでPowerAppsと出会えました。いまではビジネス・プライベートを問わず、欠かせないツールになっています。導入初期やアプリ作成時に遭遇した諸問題の解決法とサンプルアプリの作り方を紹介していきます。主にTwitterで情報収集しているので不明点など呟いているとお邪魔するかもしれません。