SharePoint Framework でグラフを表示するのにいい感じのライブラリを探していたのですが、Chart.jsが使いやすそうでしたので組み込んでみました。
まず結果
ちゃんと組み込めました。
もちろん他にも様々なグラフを描画できますので、興味があれば公式サイトのサンプルをご確認ください。
環境
- SharePoint Framework:1.5.1 (React 15.6.2に依存)
本稿執筆時点の最新バージョンです。開発環境の構築を行っていない場合には、以前の記事を参照のうえ構築してください。
SharePoint Framework (SPFx) 開発環境構築 (Windows 10) - 鍋綿ブログ
- Chart.js:2.7.2
グラフ描画用のライブラリです。ホームページはこちらです。
- react-chartjs-2:2.7.4
Chart.jsをReactのコンポーネントとして扱えるようにしたライブラリです。SharePoint Framework + React の構成に都合がいいのでこちらを利用します。GitHubで公開されています。
構築手順
新規Webパーツの作成
フレームワークとしてReactを選択して作成します。初めての方は以前の記事を参考にしてください。
SharePoint Framework (SPFx) 開発環境構築 (Windows 10) - 鍋綿ブログ
React.jsとreact-chartjs-2のインストール
npm コマンドでプロジェクトにインストールします。
プロパティ定義
さて、プロパティから揃えていきましょう。
ご自分のプロジェクトで、src > webparts > (webパーツ名) > components > I(Webパーツ名)Props.tsを編集します。
今回追加するドーナツチャートの使い方とUsageページを参考に、datasプロパティを追加して表示するデータを渡せるようにしました。私はChartJSという名前でWebパーツを作成しましたので、結果としてこうなりました。
他にもグラフに渡せるプロパティはたくさんあるのですが、今回は単純化のためにラベルと数値のみ渡すことにしました。
コンポーネント定義
次にコンポーネントを修正します。
ご自分のプロジェクトで、src > webparts > (webパーツ名) > components > (Webパーツ名).tsxを編集します。
既存のHelloWorld的なタグを全部消して、divタグに包まれたDoughnutコントロールを返すようにしました。divにclassNameを付けていますが、これは画像を取る関係でグラフのサイズを調整したかったためです。
Doughnutコントロールを利用するために、react-chartjs-2からDoughnutをインポートする必要があります。
描画
長いので単純化のために変更した部分のみ記載します。
- 上記で追加したプロパティ定義用のインタフェースをインポート
- データ取得メソッド(getData)を追加 ⇒ 仮データを返却するだけ
- renderメソッド内でgetDataを呼び出し
元々あったプロパティウィンドウ定義やらのコードは消していませんが、長いので省略しています。
割と簡単にできました。これでリッチなグラフが書き放題です。