2022.02.07PowerApps│SVGでさらに融通の利く棒グラフを作成する方法ツイート七草あんこ前回の記事ではGalleryコントロールと四角形を使って様々な棒グラフを作成しました。関連記事PowerApps│融通の利く棒グラフを作成する方法2022.02.06この手法で大抵の問題は解決するのですが、さらに一歩進んで四角形の代わりにSVGを使って棒グラフを作成します。SVGを使う利点は次の3点です。動く!はい、3点目でなんだかワクワクしてきませんか?これ、動かすことができるんですよ。アプリの標準機能で動かそうとするとTimerコントロールと組み合わせる必要があるので、結構煩雑です。棒グラフが下からにょきにょき生えてくるとか、徐々に表れてくるとか工夫と設定次第で思いのままです。そんな期待を胸に秘め、基本からアニメーションまで紹介していきます。以降、コピペできるコードはサンプルコレクションの使用を想定しています。うまく動作しない場合は調整してください。サンプルコレクションを使う場合は、下記記事にある_TimeSeriesCollection01と_TimeSeriesCollection02を適当なButtonコントロールにコピペし、実行してください。Graphics(スケーラブル・ベクター・グラフィックス、SVG)は、XMLベースの、2次元ベクターイメージ用の画像形式の1つである。アニメーションやユーザインタラクションもサポートしている。Wikipedia01│GalleryコントロールとSVGで棒グラフを作成まず、下図の部分についてGalleryコントロールを3つ並べています。上から、会社切替用のGallery00、棒グラフ描写用Gallery01、X軸目盛用Gallery02です。会社切替用(Gallery00)Galleryコントロールを600×200、TemplateSizeは50で作成します。Items=Filter(_TimeSeriesCollection02,Element=Gallery1.Selected.Element)Labelコントロールをひとつ作成します。Text=ThisItem.Element&”社”適当な色を付けた四角形をひとつ作成し、最背面に設置します。棒グラフ描写用(Gallery01)Galleryコントロールを600×200、TemplateSizeは50で作成します。今回は省略していますが、必要に応じて外側にグラフタイトルやY軸目盛、単位などをLabelコントロールで表示させてください。Items=Filter(_TimeSeriesCollection02,Element=Gallery00.Selected.Element)Galleryコントロールの表示をToggleコントロールで操作したい場合Visible=Toggle02.ValueGalleryコントロールの中にImageコントロールを50×200で作成します。ImageコントロールのImageは下記をコピペしてください。</rect></svg>")<animate>タグで動かしていますね。attributeNameで変化させる要素を、valuesで変化量を、durでアニメーションする時間を設定しています。X軸目盛用(Gallery02)Galleryコントロールを600×50、TemplateSizeは50で作成します。Items=ForAll(Sequence(12),Value)Labelコントロールをひとつ作成します。Text=Text(ThisItem.Value,”00月”)四角形をX軸境界線用に50×1、Y=0でひとつ作成します。ここまでで動く棒グラフを作成できました。動くとわくわくしますよね。キャッシュの関係か、一部または全部がアニメーションしないことがあります。原因が判明次第、追記します。続いて折れ線グラフを作成してみます。Galleryコントロールでは表現が難しいのでImageコントロールのみで作ります。折れ線グラフ描写用(Image01)Imageコントロールを600×200で作成します。位置は先ほどのGallery01に重ねます。Imageコントロールの表示をToggleコントロールで操作したい場合Visible=Toggle01.ValueImageは下記をコピペします。ギャラリーと異なり反復できないので座標すべて指定します。/></svg>")ここまでで動かない折れ線グラフを作成できました。動かないと寂しいですね。棒グラフも地道に座標を設定すればImageコントロールひとつで表現できます。どちらが良いかは決めかねますが、それぞれの手法を使えるようになれば応用力が高まりますね。円グラフは後日追加します。最後に円グラフを作成します。こちらもImageコントロールのみで作ります。使用するサンプルコレクションはClearCollect(_CircleGraph,{ID:1,Label:”くだもの”,a:55,b:20,c:15,d:10});です。円グラフ描写用(Image09)Imageコントロールを150×150で作成します。Imageは下記をコピペします。text-anchor='Right'>くだもの</text></svg>")少しだけ動く円グラフを作成できました。動くとわくわくしますね。今回はドーナツ型にして、中心にテキストを入れました。工夫次第でバリエーションも思いのままです。04│まとめSVGは万能とまで言えませんが、表現できる幅がとてつもなく広がります。応用すればパレート図や散布図も作れそうです。要望や不明点はどしどしコメントください。Twitterでも受け付けています。試して成功したら紹介しますね。PowerApps│Plannerと連動したガントチャートの作成方法2022.04.30PowerApps│SVGとギャラリーで折れ線グラフを作る方法2022.04.20PowerApps│SVGを使った散布図とバブルチャートの作り方2022.04.20PowerApps│スライサーを使ってExcelのタイムラインを再現する方法2022.04.18ご支援よろしくおねがいしますこの記事を気に入ってくださった方、寄付してあげてもいいよという方がいらっしゃっいましたら、ご支援いただけると助かります。下記リンクからAmazonギフト券で、金額は15円からお気持ちを入力してください。メッセージもいただけるとたいへん喜びます。コメントをキャンセルメールアドレスが公開されることはありません。※サイト次回のコメントで使用するためブラウザーに自分の名前、メールアドレス、サイトを保存する。US七草あんこ非IT系中間管理職やってます。社命によりoffice365を主軸とした業務改善プロジェクトメンバーに任命されたことでPowerAppsと出会えました。いまではビジネス・プライベートを問わず、欠かせないツールになっています。導入初期やアプリ作成時に遭遇した諸問題の解決法とサンプルアプリの作り方を紹介していきます。Twitterで情報収集しているので不明点など呟いているとお邪魔するかもしれません。