Framework・Office365を中心に扱うブログです。グラフを表示するのにいい感じのライブラリを探していたのですが、Chart.jsが使いやすそうでしたので組み込んでみました。描画まず結果ちゃんと組み込めました。雑なサンプルもちろん他にも様々なグラフを描画できますので、興味があれば公式サイトのサンプルをご確認ください。15.6.2に依存)本稿執筆時点の最新バージョンです。開発環境の構築を行っていない場合には、以前の記事を参照のうえ構築してください。鍋綿ブログChart.js:2.7.2グラフ描画用のライブラリです。ホームページはこちらです。react-chartjs-2:2.7.4Chart.jsをReactのコンポーネントとして扱えるようにしたライブラリです。構成に都合がいいのでこちらを利用します。GitHubで公開されています。新規Webパーツの作成フレームワークとしてReactを選択して作成します。方は以前の記事を参考にしてください。コマンドでプロジェクトにインストールします。--save-devプロパティ定義さて、プロパティから揃えていきましょう。I(Webパーツ名)Props.tsを編集します。今回追加するドーナツチャートの使い方とUsageページを参考に、datasプロパティを追加して表示するデータを渡せるようにしました。私はChartJSという名前でWebパーツを作成しましたので、結果としてこうなりました。number[];}他にもグラフに渡せるプロパティはたくさんあるのですが、今回は単純化のためにラベルと数値のみ渡すことにしました。次にコンポーネントを修正します。(Webパーツ名).tsxを編集します。既存のHelloWorld的なタグを全部消して、divタグに包まれたDoughnutコントロールを返すようにしました。divにclassNameを付けていますが、これは画像を取る関係でグラフのサイズを調整したかったためです。Doughnutコントロールを利用するために、react-chartjs-2からDoughnutをインポートする必要があります。長いので単純化のために変更した部分のみ記載します。]}]};}}元々あったプロパティウィンドウ定義やらのコードは消していませんが、長いので省略しています。これでリッチなグラフが書き放題です。開発で分かった私的ベストプラクティスまとめSPFx開発を始めて幾星霜。復旧)【2019年11月時点最新】Flowの新ライセンス形態まとめSharePointでリストのコピーができるようになりました月別アーカイブはてなブログをはじめよう!micknabewataさんは、はてなブログを使っています。ブログを報告するスターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。