Skip to main content

This is documentation for Caché & Ensemble. See the InterSystems IRIS version of this content.Opens in a new tab

For information on migrating to InterSystems IRISOpens in a new tab, see Why Migrate to InterSystems IRIS?

Chart.js のヘルパー・プラグイン

Chart.js ヘルパー・プラグインは、Chart.js ライブラリのサポートを提供します。このプラグインは、モバイル・デバイスでの使用に最も適しています。Chart.js の詳細は、http://www.chartjs.orgOpens in a new tab を参照してください。

ページ・クラスへの Chart.js の追加

必要な 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 ヘルパー・プラグインの登録

以下の例は、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.js ヘルパー・プラグインで提供されるレイアウト・オプションのクイック・リファレンスとして使用できます。詳細なリファレンス情報については、プラグイン・ドキュメント・アプリケーションを使用してください (“プラグイン・ドキュメントおよびウィジェット・リファレンス・アプリケーションの使用” を参照)。

  • $chart には、タイプ別に指定されたグラフが表示されます (既定では $barchart)。その他のレイアウト・オブジェクトには特定のグラフ・タイプが表示されます。

  • $barchart

  • $doughnutchart

  • $linechart

  • $piechart

  • $polarareachart

  • $radarchart

Chart.js ヘルパーと Highcharts ヘルパーの両方が同じ pageContents XData ブロックに登録されている場合、次のオブジェクトのプラグイン競合を解決する必要があります。$chart$barchart$linechart$piechart。Chart.js に有利になるようにすべてのプラグイン競合を解決するには、pageContents で Highcharts の前に Chart.js をリストします。詳細は、“プラグイン競合の検出と解決” を参照してください。

カスタム Chart.js レイアウト・オブジェクト・メソッド

以下のメソッドは、すべての適切なレイアウト・オブジェクト内で使用できます。

  • $hide() — レイアウト・オブジェクトを非表示にします。

  • $refresh() — レイアウト・オブジェクトの HTML を再レンダリングします。

  • $show() — レイアウト・オブジェクトを表示します。

Chart.js ヘルパー・プラグイン・メソッド

Chart.js ユーティリティ・メソッドのリストについては、この章で後述する “カスタム 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 — 値の配列

  • docViewIddocumentView の ID

グラフは value データ・オブジェクトによって決定されます。onselect() に渡される value 引数は、グラフ・インスタンスのChart.js ライブラリ・プロトタイプ・メソッドによって返される配列で、以下のようにグラフ・タイプに応じて異なる構造を持ちます。

Chart.js プラグインのサンプル・コードの使用

"ウィジェット・リファレンス" では、Chart.js ヘルパーのインタラクティブ・ウィジェットのサンプルを提供します。このリファレンスには、実施例、詳細な説明、およびユーザ自身のアプリケーションに切り取って貼り付けることができるソース・コードが含まれています。

FeedbackOpens in a new tab