Highcharts のヘルパー・プラグイン
Highcharts ヘルパー・プラグインは、Highcharts ライブラリのサポートを提供します。このプラグインは、モバイル・デバイスでの使用に最も適しています。Highcharts の詳細は、http://www.highcharts.com/Opens in a new tab を参照してください。
ページ・クラスへの Highcharts の追加
このセクションにリストされているファイルは、Highcharts 4.0.4 リリースおよび jQuery 2.0.3 リリースに含まれています。これらがまだシステムにインストールされていない場合、Highcharts は http://code.highcharts.com/zips/Highcharts-4.0.4.zipOpens in a new tab で、jQuery は https://code.jquery.com/jquery/Opens in a new tab で入手できます。
説明では、Highcharts ファイルは、<install-dir>/csp/broker のサブディレクトリ (名前は highcharts-4-0-4) にあることを前提としています (詳細は、“ページ・クラスへのプラグインの追加” を参照)。以下のファイルを使用可能にする必要があります。
-
/js/highcharts.js
Highcharts は jQuery 2.0.3 ライブラリも必要とします。以下のファイルが /csp/broker に含まれている必要があります。
-
jquery-2.0.3.min.js
以下のファイル名文字列を、ページ・クラスの JSINCLUDES パラメータに追加します。Caché では、/csp/broker がすべての相対パスのルート・ディレクトリであると想定しています。
-
JSINCLUDES ファイル名は以下のとおりです。
"jquery-2.0.3.min.js, js/highcharts.js"
ファイルは、パラメータにリストされる順序でロードされることに注意してください。この場合、Highcharts ライブラリは jQuery ライブラリに依存するため、jQuery ライブラリが最初にリストされる必要があります。
以下の例は、Chart.js ヘルパーを pageContents XData ブロックで登録する方法を示しています (詳細は、“ページ・クラスへのプラグインの追加” を参照)。この例では、既定のページ・マネージャを使用していますが、どのページ・マネージャでも動作します。
<mojo:mojoDefaultPageManager>
<mojo:highCharts-4.0.4-Helper/>
</mojo:mojoDefaultPageManager>
Highcharts ヘルパー・プラグインは、他のページ・マネージャおよびヘルパー・プラグインと共に使用できます。Chart.js ヘルパー・プラグインも使用されている場合、いくつかのプラグイン競合が発生します (詳細は、この章で後述する “Highcharts ヘルパー・レイアウト・オブジェクト” を参照してください)。
このプラグインの詳細は、"クラス・リファレンス" の %ZEN.Mojo.Plugin.highCharts404HelperOpens in a new tab を参照してください。
%ZEN.Mojo.Plugin.highCharts401HelperOpens in a new tab プラグイン・クラスも使用可能で、以前の Highcharts バージョン 4.0.1 のサポートを提供します。使用法は、バージョン 4.0.1 の highcharts.js が使用されている点を除き、バージョン 4.0.4 と同じです。また、pageContents XData ブロックにプラグインを登録するために、以下の要素を使用します。
<mojo:highCharts-4.0.1-Helper/>
テンプレート・クラスでの Highcharts の使用
$chart レイアウト・オブジェクトには、タイプ別に指定されたグラフが表示されます (既定では $barchart)。特定のグラフ・タイプを表示するレイアウト・オブジェクトのリストについては、“Highcharts ヘルパー・レイアウト・オブジェクト” を参照してください。
以下のメソッドは、すべての適切なレイアウト・オブジェクト内で使用できます。
-
$refresh() — レイアウト・オブジェクトの HTML を再レンダリングします。
このヘルパー・プラグインには、%ZEN.Mojo.Plugin.baseHelperPluginOpens in a new tab から継承されたもの以外のユーティリティ・メソッドは含まれていません。
このプラグインは、Highcharts ライブラリ関数への直接アクセスを提供しません。
この章で後述する “Highcharts イベントへの onselect() の実装” を参照してください。
Highcharts ヘルパー・レイアウト・オブジェクト
$chart レイアウト・オブジェクトには、タイプ別に指定されたグラフが表示されます (既定では $barchart)。また、Highcharts ヘルパー・プラグインは、以下のリストに記載された個々のグラフ・タイプのレイアウト・オブジェクトを提供します。このリストは、Highcharts ヘルパー・プラグインで提供されるレイアウト・オプションのクイック・リファレンスとして使用できます。詳細なリファレンス情報については、プラグイン・ドキュメント・アプリケーションを使用してください (“プラグイン・ドキュメントおよびウィジェット・リファレンス・アプリケーションの使用” を参照)。
| $areachart | $boxplotchart | $errorbarchart | $piechart | $splinechart |
| $arearangechart | $bubblechart | $funnelchart | $pyramidchart | $waterfallchart |
| $areasplinechart | $chart | $gaugechart | $scatterchart | |
| $areasplinerangechart | $columnchart | $heatmapchart | $serieschart | |
| $barchart | $columnrangechart | $linechart | $solidgaugechart |
Highcharts ヘルパーと Chart.js ヘルパーの両方が同じ pageContents XData ブロックに登録されている場合、次のオブジェクトのプラグイン競合を解決する必要があります。$chart、$barchart、$linechart、$piechart。Highcharts に有利になるようにすべてのプラグイン競合を解決するには、pageContents で Chart.js の前に Highcharts をリストします。詳細は、“プラグイン競合の検出と解決” を参照してください。
Highcharts イベントへの onselect() の実装
クリック・イベントでは、すべての HighCharts レイアウト・オブジェクトに既定のイベント・ハンドラを割り当てられます。これらの既定を変更するには、イベントを処理するために contentTemplate.onselect() メソッドのオーバーライドを実装します ("Zen Mojo の使用法" の “イベント処理” を参照)。
グラフ・レイアウト・オブジェクトがクリックされると、プラグインは以下の引数を onselect() に渡します。
-
key — 選択されたレイアウト・オブジェクトのキー
-
value — 値の配列
-
docViewId — documentView の ID
グラフは value データ・オブジェクトによって決定されます。onselect() に渡される既定の value 引数は、レイアウト・オブジェクトがクリックされる場所に応じて変わります。
-
グラフ内のあるポイントがクリックされると、value のプロパティは seriesIndex と dataIndex になります。これらのプロパティにはそれぞれシリーズとデータ・ポイントのインデックスが含まれます。
動作をオーバーライドするには、レイアウト・オブジェクトの options.plotOptions.series.point.events プロパティを定義します (オプションの詳細は、http://api.highcharts.com/highcharts#plotOptions.series.point.events.clickOpens in a new tab を参照)。
-
(グラフ内のあるポイントでなく) グラフの背景がクリックされると、value のプロパティは chartX と chartY になります。これらのプロパティにはクリックされたスポットの X と Y の位置が含まれます。
この動作をオーバーライドするには、レイアウト・オブジェクトの options.chart.events.click プロパティを定義します (オプションの詳細は、http://api.highcharts.com/highcharts#chart.events.clickOpens in a new tab を参照してください)。
"ウィジェット・リファレンス" の Highcharts コードには、これらのイベント・オーバーライドの実施例が含まれています。
Highcharts プラグインのサンプル・コードの使用
"ウィジェット・リファレンス" では、Highcharts ヘルパーのインタラクティブ・ウィジェットのサンプルを提供します。このリファレンスには、実施例、詳細な説明、およびユーザ自身のアプリケーションに切り取って貼り付けることができるソース・コードが含まれています。
