SharepointのモダンUIページに、エクセルやPowerBIを使わずに単体でグラフを埋め込む方法をご紹介します。
モダンUIになってから登場したWebパーツの一つに「クイック グラフ」というものがあります。
このWebパーツを使うと、棒グラフ、または円グラフをWeb上に描画することができます。ちょっとしたアニメーション効果もあり、インパクトがあります。
若干の制限事項もあるため、その点に触れつつ使い方を投稿します。
SharepointモダンUIでグラフを埋め込む方法
思いつくところで次の通りです。
今さら、クラシックUIでのスクラッチはやめたほうがいいでしょう。メンテンナンスする上で大変です。
PowerBIは+αのコストが必要なので、有力な選択肢はエクセルか、今回の「クイックグラフ」になるでしょう。
クイックグラフは、シンプルな縦棒グラフ、円グラフで何かを表現するときにお手軽です。
Sharepoint「クイックグラフ」Webパーツの使い方
「クイックグラフ」Webパーツは、モダンUIのページ編集機能から呼び出すことができます。

パーツの呼び出しは「クイック」と入れたほうが良いかも。
作れるグラフは縦棒グラフ、または円グラフ
現状で作れるのは二種類です。折れ線はないですね。

アニメーション効果あって目を引く
- 縦棒グラフ
- 棒グラフを使用して、データの経時変化や項目間の比較を表示します。カテゴリは通常、横軸と縦軸の値に沿って表示されます。
- 円グラフ
- 円グラフを使用して、全体のパーセンテージを表示します。7 つ未満のカテゴリで使用する場合に最適です。
データソースはページ上での手動入力、またはSharepointリスト
手動入力はページ編集上で「ラベル」と「値」を手で入れていきます。Sharepointリストはデータ列が存在する既存のものが使えます。
手動でデータを入れる

手動の場合は、データラベル、値を入れていきます。追加できるデータポイントは12個まで。

棒グラフに限り、設定画面下部に「レイアウト」という領域が用意されています。グラフ縦横軸に名称をつけることができます。


(金額は適当ですが)リアルで株価好調です。コロナ禍でちょっと怖いくらい。
既存リストをデータソースにする

▲ リストをデータソースとする場合は、最初に対象のリストを選びます。値の候補となる列が存在しないリストは候補には出てきませんでした。

▲ リストを選んだら「表示するデータがある列」に数値や通貨列、「各データポイントのラベル付きの列」に分類する列を選択します。

並べ替えはデータ、またはラベル列の昇順・降順で可能です。
以下、棒グラフで売上推移の出来上がり。例を考えるのがメンドウだったので実際にあった何かの売り上げ。


▲ クイックグラフの右上にはデータ更新ボタンがあります。リスト側に新しいデータがあれば、更新ボタンを押すことでデータを再同期できます。
基本的な使い方はこれだけ、機能としてはシンプル。
制限事項
グラフの配色は指定できない
インターフェースは直感的で簡単に使えるように最低限に絞っています。グラフの配色設定などは指定できませんでした。そのうち、機能追加される気もしますが。
リストで使える列
Sharepoint上のリストを使えますが、すべての列に対応はしていないようです。
モダンUI一覧画面上から追加できる列で確認したところ次の通りでした(クラシックUIから行うリスト設定までは見てません)。
列タイプ | 対応 |
---|---|
タイトル | 〇(ラベルとして利用可能) |
1行テキスト | 〇(ラベルとして利用可能) |
数値 | 〇(値として利用可能) |
通貨 | 〇(値として利用可能) |
複数行テキスト | 不可 |
場所 | 不可 |
はい/いいえ | 不可 |
個人 | 不可 |
日付と時刻 | 不可 |
選択肢 | 不可 |
ハイパーリンク | 不可 |
画像 | 不可 |
データは集計されない
BIツール的な目線にはなりますが、データは集計されませんでした。集計とは行列リストに存在する同じデータ系列をまとめて計算(合計、平均、最大値、最小値など)を出力する概念です。
例えば、次のような表があるとします。
日付 | 商品 | 販売額 |
---|---|---|
2020/2/1 | 商品A | 100 |
2020/2/2 | 商品C | 200 |
2020/2/2 | 商品C | 200 |
2020/2/3 | 商品B | 500 |
2020/2/3 | 商品A | 100 |
2020/2/3 | 商品A | 100 |
2020/2/4 | 商品B | 500 |
この表で棒グラフを描画する場合には商品A~Cごとの合計額を期待、円グラフの場合には商品A~Cごとの販売割合を期待すると思います。しかし、クイックグラフでできる円グラフはそうならない。
商品 | 販売額(合計) |
---|---|
商品A | 300 |
商品B | 1,000 |
商品C | 400 |


▲ 上記の通り、商品名称はまとめられず行単位でデータポイントとして描画されます。ちょっと使いづらいですね。
Sharepointリストを使った想定される運用方法
クイックグラフで描画することを念頭においたリスト設計が必要そうです。または、既存の列からPower Automateなどで集計しなおし、クイックグラフ読込み用のリストへ書き出すとか。

気が向いたら記事にしようかな。
まとめ
グラフとしてはアニメーション効果もあり、視認性がよいので組織のKPIを表示する用途に向いていそうです。一方で使えるグラフは二種類だけなので、より複雑なグラフを埋め込みたい場合にはエクセルか、PowerBIが良いでしょう。
PowerBIはまだまだ書籍では情報不足の感が否めません。一方、Udemyなどで動画を探すと日本語・英語で有益なものが見つかります。動画は買い切りで何度も見返せるので私もよく使っています。
参考 Udemyで学べる「Excelデータビジュアリゼーション」
Udemy(ユーデミー)の特徴
- コロナ禍でもオンラインで手軽に学べる
- 趣味にビジネスに豊富なジャンル
- 動画は買い切り・繰り返し視聴可能
- PCでもスマホでも見れる
- コンテンツのクオリティが高い