概要
JavaScript グラフは基本的に、2つのコンポーネントで構成されています。「JavaScript」と「CSSコード」です。CSSはオプション設定です。
JavaScriptは、独自のライブラリーを記述することも、既存のライブラリーを活用することもできます。Yellowfinには、様々なライブラリーが事前に設定されており「/js/chartingLibraries/」フォルダーに格納されています。必要に応じて、任意のライブラリーをこちらのフォルダーに追加することをお勧めします。これは、グラフライブラリーの使用に技術的に必要なことではなく、JavaScriptとレポートデータを使用して作成することも可能です。
CSSルールを定義する場合、Yellowfinのスタイル矛盾しないように、独自の名前を付けることをお勧めします。例:mycompanyname_chart_ textcolour
グラフデータオプション
オプション | 説明 |
JavaScript コードパネル | JavaScript コードの入力に使用します。 |
CSSパネル | CSSコードの提供に使用します。 |
プレビューパネル | コーディングした内容のプレビューを生成します。 |
セキュリティ
JavaScript グラフ機能を有効にするために、管理者は二階層システムを使用しなくてはいけません。以下を実行します。
- システム構成ページで、以下の項目を有効にします(「管理コンソール」>「システム構成」>「システム」>「セキュリティ」>「JavaScript グラフ」)。
- 選択したロールで、以下の機能を有効にします(「ロール」>「レポートビルダー」>「JavaScript グラフ」)。
JavaScript グラフの作成者や編集者のために、新規ロールを設定することをお勧めします。これにより、JavaScript グラフ機能は厳重に管理され、必要の無い時には無効にすることができます。
JavaScript 機能を有効にする方法は、こちらを参照してください。
JavaScript グラフ機能を無効にした場合
システム構成レベルで、JavaScript グラフ機能を無効にした場合
- すべてのJavaScript グラフの実行が停止します。
- JavaScript グラフのためのすべてのJavaScript/CSSをプラットフォームからエクスポートすることができません。
- プラットフォームにJavaScript グラフをインポートすることができません。
JavaScript グラフ機能が有効化されたロールを付与されていないユーザーは、JavaScript グラフをインポートすることはできません。
グラフ作成者は、開発環境とテスト環境に関する適切なコンテンツ開発と移行戦略、および承認ワークフローを活用し、ガバナンスを確保することをお勧めします。
generateChart機能の使用
JavaScript グラフ作成時に唯一必要な機能は、「generateChart」です。サンプルコード内で提供されている他の機能は推奨です。Yellowfinは、JavaScript コードを実行するために、generateChartを呼び出します。
すべてのオプションとYellowfinから必要なデータは、JSONオブジェクトの一部として、generateChart機能へ送られます。
指定されたdiv (Options. divSelector)にすべてを描画し、データセットからIDを取得します。
JavaScript グラフの例
RequireとShim
JavaScript グラフに必要なライブラリーをロードするためには、「Require」を使用します。JavaScript APIを介した埋め込みや、レポートの一般公開をするのであれば、「絶対パス」を使用しなくてはいけません。それ意外の場合は、相対パスで構いません。
Requireを使用するためには、下記のように、ロードに必要なパスを定義します。
非AMD JavaScript ライブラリーが使用される特定の場合では、「Shim」が必要です。Yellowfinに事前に設定されているライブラリーはShimを必要としませんが、ウェブサイトをソースとする特別なライブラリーを使用する場合に必要になる可能性があります。
Shimについてより詳細な情報は、requireJSの資料を参照してください。
Shimを使用して非AMDライブラリーであるVizJSを要求する例は、以下の通りです。
Options JSON オブジェクト
データセットの例
下記の例を使用して説明します。例に使用されているデータのいくつかは省略されていることに留意してください。
divSelector (options.divSelector)
グラフの描画するdivのIDを使用するCSSセレクターです。これは、jクエリー、D3、またはCSSスタイルセレクターを使用するすべてのセレクターで使用することができます。
例:jクエリー内でグラフdivを選択するためには、以下を実行します。
var $chartDrawDiv = $(options.divSelector);
chartId (options. chartId)
現在のグラフのインターナルYellowfin IDです。
errorCallback (options.errorCallback)
デフォルトのエラーメッセージの表示を呼び出す機能です。JavaScript グラフからのエラーメッセージを、Yellowfinのスタイリングと一貫して表示したい場合は、これを使用します。これは、エラーが発生したコンソールにも出力されます。
dataset (options. dataset)
レポートデータや、いくつかのレンダリング情報を表す属性を持つオブジェクトです。データセットオブジェクトには、以下の属性が含まれます。
chart_information (options. dataset. metadata)
グラフレンダリングに使用される情報を含むオブジェクトです。
- 高さと幅:グラフがレンダリングする領域の高さと幅の属性を含みます(ダッシュボードポートレット、キャンバスの幅、ストーリーボード、グラフビルダーの表示、JavaScript API)。レポートの表示ページに、レポートがひとつだけの場合に、グラフに設定される高さと幅になります。これらの値がJavaScript コンテナで使用されていることを確認し、適切なサイズ変更をしてください。
- タイトル:グラフのタイトルが定義されている場合、データセットオブジェクトの一部になります。
metadata (options. dataset. metadata)
レポート内のフィールドの情報です。属性の名前は、レポート内のフィールドに基づきます(スペース付きの小文字はすべてアンダースコアで置き換えられ、重複するフィールド名は名前の末尾に数字を追加します)。こちらで使用されるフィールド名は、データに使用されるフィールド名に対応します。メタデータ内で以下のオブジェクトには、各フィールドのそれぞれの属性が含まれています。
属性 | 説明 |
data_type | フィールドのデータ型を表す文字列です(TEXT、NUMERIC、など) |
field_name | 書式設定されたフィールドの名前です。翻訳が有効になっている場合、ユーザーの優先言語でフィールド名の翻訳バージョンが返されます。 |
metric_colour | ビューレベルでこのフィールドにIfametriccolourが設定されている場合、選択された色のHEXコードを含むmetric_colour属性が存在します(例:#FFFFFF)。(こちらの設定はオプションです) |
org_refcode | データページでフィールドに参照コードが適用されている場合、この参照コードの情報は、JavaScript グラフデータセットオブジェクトに含まれます。 これは、参照コード名を返します。例:上記の例では、「DEMOGRAPHIC」が該当します。 属性オブジェクトは、参照コードの実際のデータを含みます(例:並び順、表示テキスト、色、など)。下記のorgrefcode_definitionsを参照してください(こちらの設定はオプションです)。 |
グラフ選択ガイド