当ブログに掲載しているサンプルは、すべて利用者の自己責任という形でお願いします。
ただし、明らかな不具合がある場合、ご連絡いただければ、訂正記事を出します。
また、こちらのサンプルは、別のサイト等への公開、転載は一切禁止しています。
どうしてもと言う場合は、筆者にあらかじめご連絡ください。

テクてく Lotus 技術者 Slack に参加しよう!

2014年6月9日月曜日

XPagesでグラフを描いてみよう

おはようございます。気が付いたら、関東地方も梅雨入りしたようです。
でも、気分までじめじめしないようにしたいですね。



では、今日の話題へと。
今までいくつかXPagesについて書いてきましたが、グラフ描画について触れていないことに気が付きました。
理由はいくつかあるのですが・・・

理由はさておき、今日はXPagesでグラフ描画をする方法についてのご紹介です。
グラフ描画の方法はいくらでもあるのですが、XPagesでということなので、
標準搭載されているDojoでの実現方法についてです。


内容に入る前に、今日も、こちらのボタンをクリックしてから読みましょう。
にほんブログ村 IT技術ブログへ


実は、XPagesそのものにはグラフ描画をするコントロールは用意されていません。
ですので、dojo toolkitを使って描画するということになります。
私の環境はIBM Notes/Domino 9.0.1ですので、dojoのバージョンは1.5.21.8(2014/06/20訂正)になります。
最新バージョンは1.9になっていますので、動きの違いや設定方法の違いがあるかもしれませんが、そこはご了承ください。


XPagesでDojo Toolkitを使ってグラフを描画するには、次の作業が必要です。

  1. グラフを描画するためのDojoモジュールを組み込む
  2. グラフを描画するための領域を作成する
  3. グラフを描画するためのデータを用意する 
  4. グラフを描画するためのJavaScriptを記述する

一つ一つ説明していきましょう。
まずは、1.のグラフ描画用Dojoモジュールの組み込みです。
こちらはXPage(もしくはカスタムコントロール)のリソースとして設定します。
下図は「カスタムコントロール」に円グラフの描画に必要なDojoモジュールを組み込んだところです。
円グラフ描画用のDojoモジュール
手順は次の通りです。
XPage(もしくはカスタムコントロール)を開いて、「プロパティ」ビューの「リソース」タブを開きます。
[追加][Dojoモジュール]ボタンをクリックします。
リソースの追加

すると、「Dojoモジュールをページへ追加」というダイアログが表示されるので、Dojoモジュール名を入力して[OK]をクリックします。
Dojoモジュールをページへ追加

この時、何を記述すればよいか、わからないですよね。
Dojoモジュールは、下記のディレクトリ配下にありますので(Notesクライアントの場合も同じ場所にあります)、ここをrootとして、モジュール名を記述します。ディレクトリは「.」(ピリオド)で表します。
Dominoデータディレクトリ\domino\js\dojo-1.5.2\
例えば、グラフそのものは「Dominoデータディレクトリ\domino\js\dojo-1.5.2\dojox\charting\Chart2D.js」というライブラリになるので、
dojox.charting.Chart2D
と記述します。
※どんなモジュールがあるのかについては、後述するDojo Toolkitのサイトを参照してください。
ここでは、上記の他、「dojox.charting.themes.Chris」というモジュールを追加してください。
(これは描画時の画面スタイルでテーマと呼びますが、たくさんの種類があります。種類はDojo ToolkitのDemosページの「Chart Plot Types」で確認してください)


では次に2.のグラフ描画領域を設定しましょう。
これは、単純に
があれば良いのですが、ここはXPagesでの設定方法を。
簡単なのは、パネルコントロールを配置することです。
その際、高さと幅を設定するのを忘れないようにしましょう。デフォルトだとAuto設定になるので、変な風に表示されてしまいます。
数値はお使いのPCの環境に合わせてください。また、コントロール名も設定することを忘れないでください。
私のPCでは、高さ360ピクセル、幅640ピクセル、コントロール名を「myChart」としました。
グラフ描画領域の設定(パネルコントロール)

3.のグラフ描画用のデータは当然必要になってきますね。
このデータは4.のJavaScriptを記述するときに必要になります。
注意しなくてはならないのは、このデータは配列(Array)形式で作成しなくてはならないという事です。
さらに、グラフの形式によって設定方法が若干異なるので、どんなグラフを作成するのかをあらかじめ決めておくと良いでしょう。
ここでは、円グラフを作成するので、ビューの文書数をカウントするような形にしたので、こんな感じです。
var dStore1 = '{y:' + cnt1 + ',' + 'text:"障害(解決済)"}';
これをArrayに格納するので、
chartArray.push( dStore1 );
としています。
このArrayをグラフのデータとして利用します。



最後に4.のグラフ出力用のJavaScriptの記述です。
えー・・・正直言うと、わかりませんでしたので、OpenNTFにあるCRM Applications for XPages in Japaneseを参考にさせていただきました。
うーん、OpenNTFは役に立ちますね。

実際には次の手法となります。
「出力スクリプト」コントロールを配置して、「すべてのプロパティ」のvalue項目に式を記述します。
なお、この「出力スクリプト」コントロールはデフォルトの状態ではコントロールビューには表示されないので、「その他」から選択する必要があります。
出力スクリプトコントロールを追加

また、式は「外部プロパティエディタ」を起動するというアイコンをクリックして記述します。
出力スクリプトのValue
こうすると、クライアントサイドJavaScriptが記述できます。「値の計算」を選択すると、サーバーサイドJavaScriptになってしまい、グラフ描画が行えませんので、注意してください。
出力スクリプトはこんな感じになります。
グラフ描画用スクリプト
コメントが付いているので、なんとなく理解していただけるのではないかと思いますが、念のため。

XSP.addOnLoad
というのは、グラフ用のページがロードされたときのイベントです。画面を開いた時にグラフを描画しますよ。ということですね。

var myChart = new dojox.charting.Chart2D( "#{id:myChart}" );
というのはグラフオブジェクトを定義しているところです。
1.で設定したDojoモジュールがここで使用されています。また、パネルコントロールの名前をmyChartにしたので、そこにグラフオブジェクトを関連付けしています。
"#{id:~}"というのは、XPagesのコントロール名をクライアントサイドのJavaScriptで指定する際の決め事と思ってください。

myChart.addPlot( "default", { type: "Pie" } );
というのでグラフの種類を設定しています。Pieが円グラフを表しています。
※画像ではmyChart.addPlot( "default", { type: Pie } );となっていますが、
Pieは"Pie"とするのが正しいです。

myChart.addSeries( "default", #{javascript:getChartData();}, {stroke: {color: "blue", width: 3}} );
でグラフのデータを設定しています。
{stroke: {color: "blue", width: 3}}はオプションですので、なくても構いません。
getChartData()は3.で説明したグラフ描画用のデータ取得関数です。Arrayが返ってくるようにしてあります。

myChart.setTheme( dojox.charting.themes.Chris );
でグラフの描画スタイル(テーマ)を決めて、

最後に
myChart.render();
でグラフを描画しています。

色々とオプションを設定していますが、こんな風に表示されます。
円グラフのサンプル

とりあえず、グラフの描画ができました。
グラフ描画には様々なオプションがあるのですが、多すぎて紹介しきれません(汗)。

Dojo Toolkitのサイトを見ると、サンプルコードが載っていたり、デモ画面も見られるのでぜひ参考にしてください。
Dojo Toolkitはこちらのサイトに情報があります。私も参考にしながら、この記事を書きました。
Unbeatable JavaScript Tools - The Dojo Toolkit
「Documentation」というタブの「Reference Guide」というリンクと「API Documentation」というリンクの内容が役に立ちます。






では、今日はこの辺で。


Web化するならXPages!






【PR】ノーツ/ドミノに関するお問い合わせは下記まで【PR】
単純なDBのカスタマイズから他アプリケーションとの連携までご要望にお応えします!
Lotus Notes/Domino カスタマイズとセキュリティ強化 - 株式会社エフ




1 件のコメント:

匿名 さんのコメント...

Dojoでのグラフ作成を行っていますが、具体的で参考になります。

3のJavaScriptをどこで設定しているか教えていただけると助かります。