Chart.js のヘルパー・プラグイン
Chart.js ヘルパー・プラグインは、Chart.js ライブラリのサポートを提供します。このプラグインは、モバイル・デバイスでの使用に最も適しています。Chart.js の詳細は、http://www.chartjs.orgOpens in a new tab を参照してください。
ページ・クラスへの Chart.js の追加
以下の必要なファイルがまだインストールされていない場合、https://github.com/nnnick/Chart.js/releasesOpens in a new tab にある Chart.js バージョン 1.0.1 のソースから入手できます。
-
Chart.min.js
説明では、このファイルは、<install-dir>/csp/broker にあることを前提としています (詳細は、“ページ・クラスへのプラグインの追加” を参照)。以下のファイル名文字列を、ページ・クラスの JSINCLUDES パラメータに追加します。Caché では、/csp/broker がすべての相対パスのルート・ディレクトリであると想定しています。
-
JSINCLUDES ファイル名は以下のとおりです。
"Chart.min.js"
ファイルは、パラメータにリストされる順序でロードされることに注意してください。Dojo 2D Chart ヘルパー・プラグインも使用する場合、JSINCLUDES パラメータ内で Chart.js ライブラリを Dojo ライブラリの前にリストしてください。
以下の例は、Chart.js ヘルパーを pageContents XData ブロックで登録する方法を示しています (詳細は、“ページ・クラスへのプラグインの追加” を参照)。この例では、既定のページ・マネージャを使用していますが、どのページ・マネージャも有効です。
<mojo:mojoDefaultPageManager>
<mojo:charts-1.0.1-Helper/>
</mojo:mojoDefaultPageManager>
Chart.js ヘルパー・プラグインは、他のページ・マネージャおよびヘルパー・プラグインと共に使用できます。Highcharts ヘルパー・プラグインも使用されている場合、いくつかのプラグイン競合が発生します (詳細は、以下のセクションの “Chart.js レイアウト・オブジェクト” を参照してください)。
このプラグインの詳細は、"クラス・リファレンス" の %ZEN.Mojo.Plugin.charts101HelperOpens in a new tab を参照してください。
テンプレート・クラスでの Chart.js の使用
以下のリストは、Chart.js ヘルパー・プラグインで提供されるレイアウト・オプションのクイック・リファレンスとして使用できます。詳細なリファレンス情報については、プラグイン・ドキュメント・アプリケーションを使用してください (“プラグイン・ドキュメントおよびウィジェット・リファレンス・アプリケーションの使用” を参照)。
-
$chart には、タイプ別に指定されたグラフが表示されます (既定では $barchart)。その他のレイアウト・オブジェクトには特定のグラフ・タイプが表示されます。
-
$barchart
-
$doughnutchart
-
$linechart
-
$piechart
-
$polarareachart
-
$radarchart
Chart.js ヘルパーと Highcharts ヘルパーの両方が同じ pageContents XData ブロックに登録されている場合、次のオブジェクトのプラグイン競合を解決する必要があります。$chart、$barchart、$linechart、$piechart。Chart.js に有利になるようにすべてのプラグイン競合を解決するには、pageContents で Highcharts の前に Chart.js をリストします。詳細は、“プラグイン競合の検出と解決” を参照してください。
以下のメソッドは、すべての適切なレイアウト・オブジェクト内で使用できます。
-
$hide() — レイアウト・オブジェクトを非表示にします。
-
$refresh() — レイアウト・オブジェクトの HTML を再レンダリングします。
-
$show() — レイアウト・オブジェクトを表示します。
Chart.js ユーティリティ・メソッドのリストについては、この章で後述する “カスタム Chart.js ヘルパー・プラグイン・メソッド” を参照してください。
このプラグインは、Chart.js ライブラリ関数への直接アクセスを提供しません。
onselect() イベント・ハンドラは、アプリケーションで使用するグラフ・タイプごとに実装する必要があります。詳細は、この章で後述する “Chart.js イベントへの onselect() の実装” を参照してください。
カスタム Chart.js ヘルパー・プラグイン・メソッド
%ZEN.Mojo.Plugin.baseHelperPluginOpens in a new tab から継承されたメソッドに加えて、Chart.js ヘルパー・プラグインは以下のユーティリティ・メソッドを提供します。これらのメソッドはそれぞれ、適切なグラフ・タイプに対応する Chart.js ライブラリ・プロトタイプ・メソッドを呼び出します。
-
addData()
method addData(key, data, labelOrIndex) [ Language = javascript ]
key で指定されたグラフにデータを追加します。labelOrIndex パラメータは、ドーナッツ・グラフ、円グラフ、および極地図ではデータセット・インデックスであると予測されます。
-
removeData()
method (key, index) [ Language = javascript ]
key で指定されたグラフからデータを削除します。index パラメータは、ドーナッツ・グラフ、円グラフ、および極地図の各タイプにのみ適用されます。index がそれらのグラフ・タイプに指定されていない場合、最後のデータ要素が削除されます。他のグラフ・タイプでは、単純に最初の変数が削除されます。
-
update()
method update(key) [ Language = javascript ]
key で指定されたグラフを更新し、再レンダリングします。
Chart.js イベントへの onselect() の実装
Chart.js ヘルパー・プラグインは、各グラフ・タイプのイベント処理をサポートします。選択イベントを処理するには、テンプレートは contentTemplate.onselect() メソッドのオーバーライドを実装する必要があります ("Zen Mojo の使用法" の “イベント処理” を参照してください)。グラフ・レイアウト・オブジェクトが選択されると、プラグインは以下の引数を onselect() に渡します。
-
key — 選択されたレイアウト・オブジェクトのキー
-
value — 値の配列
-
docViewId — documentView の ID
グラフは value データ・オブジェクトによって決定されます。onselect() に渡される value 引数は、グラフ・インスタンスのChart.js ライブラリ・プロトタイプ・メソッドによって返される配列で、以下のようにグラフ・タイプに応じて異なる構造を持ちます。
-
$linechart および $radarchart — value は、getPointsAtEvent() メソッドによって返される配列です (http://www.chartjs.org/docs/#line-chart-prototype-methodsOpens in a new tab を参照)。
-
$barchart — value は、getBarsAtEvent() メソッドによって返される配列です (http://www.chartjs.org/docs/#bar-chart-prototype-methodsOpens in a new tab を参照)。
-
$piechart、$doughnutchart、および $polarareachart — value は、getSegmentsAtEvent() メソッドによって返される配列です (http://www.chartjs.org/docs/#polar-area-chart-prototype-methodsOpens in a new tab を参照)。
-
$chart — value は、指定されたグラフ・タイプに適したメソッドによって返される配列です。
Chart.js プラグインのサンプル・コードの使用
"ウィジェット・リファレンス" では、Chart.js ヘルパーのインタラクティブ・ウィジェットのサンプルを提供します。このリファレンスには、実施例、詳細な説明、およびユーザ自身のアプリケーションに切り取って貼り付けることができるソース・コードが含まれています。