鍋綿ブログ

C#・SharePoint・SharePoint Framework・Office365を中心に扱うブログです。

SharePoint Framework + React + Chart.js でグラフ表示

SharePoint Framework でグラフを表示するのにいい感じのライブラリを探していたのですが、Chart.jsが使いやすそうでしたので組み込んでみました。

 

 

まず結果

ちゃんと組み込めました。

f:id:micknabewata:20180820211249j:plain

雑なサンプル

もちろん他にも様々なグラフを描画できますので、興味があれば公式サイトのサンプルをご確認ください。

環境

  • 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 コマンドでプロジェクトにインストールします。

npm install react-chartjs-2 chart.js --save-dev

プロパティ定義

さて、プロパティから揃えていきましょう。
ご自分のプロジェクトで、src > webparts > (webパーツ名) > components > I(Webパーツ名)Props.tsを編集します。

今回追加するドーナツチャートの使い方Usageページを参考に、datasプロパティを追加して表示するデータを渡せるようにしました。私はChartJSという名前でWebパーツを作成しましたので、結果としてこうなりました。

export interface IChartJsProps {
  /** グラフに表示するデータ */
  datas : IChartData;
}

/** グラフに表示するデータ */
export interface IChartData {
  /** ラベル配列 */
  labels : string;
  /** データ配列 */
  datasets : IDataSet;
}

/** データ配列 */
export interface IDataSet {
  /** 数値 */
  data: number[];
}

他にもグラフに渡せるプロパティはたくさんあるのですが、今回は単純化のためにラベルと数値のみ渡すことにしました。

コンポーネント定義

次にコンポーネントを修正します。
ご自分のプロジェクトで、src > webparts > (webパーツ名) > components > (Webパーツ名).tsxを編集します。

既存のHelloWorld的なタグを全部消して、divタグに包まれたDoughnutコントロールを返すようにしました。divにclassNameを付けていますが、これは画像を取る関係でグラフのサイズを調整したかったためです。

Doughnutコントロールを利用するために、react-chartjs-2からDoughnutをインポートする必要があります。

import * as React from 'react';
import styles from './ChartJs.module.scss';
import { IChartJsProps } from './IChartJsProps';
import { Doughnut } from 'react-chartjs-2';

export default class ChartJs extends React.Component<IChartJsProps, {}> {
  public render(): React.ReactElement<IChartJsProps> {
    return (
      <div className={ styles.daughnutContainer }>
        <Doughnut data={ this.props.datas } >
        </Doughnut>
      </div>
    );
  }
}

描画

長いので単純化のために変更した部分のみ記載します。

  • 上記で追加したプロパティ定義用のインタフェースをインポート
  • データ取得メソッド(getData)を追加 ⇒ 仮データを返却するだけ
  • renderメソッド内でgetDataを呼び出し
import { IChartJsProps, IChartData } from './components/IChartJsProps';
 
/** ChartJsサンプルWebパーツ */
export default class ChartJsWebPart extends BaseClientSideWebPart<IChartJsWebPartProps> {

  /** 描画メソッド */
  public render(): void {
    // データ取得
    let datas : IChartData = this.getData();
    // ChartJsコンポーネントを描画
    const element: React.ReactElement<IChartJsProps > = React.createElement(
      ChartJs,
      {
        datas : datas
      }
    );
    ReactDom.render(element, this.domElement);
  }
 
  /** データ取得メソッド */
  protected getData() : IChartData
  {
    return {
      labels : [ 'aaa', 'bbb' ],
      datasets : [
        {
          data : [15, 20],
          backgroundColor : [
            'rgba(255, 99, 132, 0.2)',
            'rgba(54, 162, 235, 0.2)' ]
        }
      ]
    };
  }
}

元々あったプロパティウィンドウ定義やらのコードは消していませんが、長いので省略しています。

 

割と簡単にできました。これでリッチなグラフが書き放題です。