Page Comparison

...

概要

JavaScript グラフは基本的に、2つのコンポーネントで構成されています。「JavaScript」と「CSSコード」です。CSSはオプション設定です。

JavaScriptは、独自のライブラリーを記述することも、既存のライブラリーを活用することもできます。Yellowfinには、様々なライブラリーが事前に設定されており「/js/chartingLibraries/」フォルダーに格納されています。必要に応じて、任意のライブラリーをこちらのフォルダーに追加することをお勧めします。これは、グラフライブラリーの使用に技術的に必要なことではなく、JavaScriptとレポートデータを使用して作成することも可能です。

CSSルールを定義する場合、Yellowfinのスタイル矛盾しないように、独自の名前を付けることをお勧めします。例：mycompanyname_chart_ textcolour 

グラフデータオプション

セキュリティ

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 グラフの例

Image Removed

RequireとShim

JavaScript グラフに必要なライブラリーをロードするためには、「Require」を使用します。JavaScript APIを介した埋め込みや、レポートの一般公開をするのであれば、「絶対パス」を使用しなくてはいけません。それ意外の場合は、相対パスで構いません。

Requireを使用するためには、下記のように、ロードに必要なパスを定義します。

Image Removed

非AMD JavaScript ライブラリーが使用される特定の場合では、「Shim」が必要です。Yellowfinに事前に設定されているライブラリーはShimを必要としませんが、ウェブサイトをソースとする特別なライブラリーを使用する場合に必要になる可能性があります。

Shimについてより詳細な情報は、requireJSの資料を参照してください。

Shimを使用して非AMDライブラリーであるVizJSを要求する例は、以下の通りです。

Image Removed

Options JSON オブジェクト

データセットの例

下記の例を使用して説明します。例に使用されているデータのいくつかは省略されていることに留意してください。

Image Removed

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 (options. dataset. data)

レポート内の実際のデータを含むオブジェクトです。上記で定義したメタデータの場合と同様に、属性名はレポート内の項目に基づきます（スペース付きの小文字はすべてアンダースコアで置き換えられ、重複するフィールド名は名前の末尾に数字を追加します）。これらは、各フィールドで以下の属性を持つオブジェクトの配列を表します。

attributes (options. dataset. attributes)

追加のレンダリング情報を含むオブジェクトです。これには、以下の属性が含まれます。

シーン操作の背景

JavaScript グラフを呼び出すと、まず始めに、以下を含むデータセットサーバサイドを生成します。

• グラフJavaScript
• グラフCSS
• グラフ失敗イメージ（グラフエラーのコールバックで使用されます）
• JavaScript グラフデータセットオブジェクト

システム構成レベルで、JavaScript グラフ機能が無効になっている場合、JavaScript、CSS、データセットは返りません。

JavaScript ハンドラーは、generateChart機能を呼び出し、JavaScript グラフデータセットオブジェクト、chartId、divSelector、errorCallback機能を送ります。

CSSは、スタイルタグ内でchart divに追加されます。

これらのロジックすべては、グラフに失敗があれば標準のエラーメッセージを表示するtry/catch機能でまとめられます。

追加のデータ処理

Yellowfinはレポートのテーブル表示から参照できるデータセットを返します。

しかし、必要に応じて、さらなる処理をするために、JavaScript グラフコードに追加機能を定義することができます。

下記は、自己定義したprocess Data機能を使用してデータを合計集約する場合のシンプルな例です。

Image Removed

また、以下のいずれかの方法で独自のprocessData機能定義を記述することができます。

• データをさらに変更する
• 選択されたグラフライブラリーの予想される入力に適合する適切な格子/配列に変換する

例えば、特定のD3.js グラフ（例：Sunburst、Bubble Cloud、またはflare.json の例を使用するグラフ）は、階層的オブジェクト構造のデータを使用します。こちらの例では、options. dataset. data内に設定されたYellowfinレポートデータは、以下によりさらに処理されます。

1. 各カラム（列）をその名前を含むように移動する
2. 配列へマージする

Image Removed

こちらは、GoogleChartsライブラリーを使用した別の例です。こちらのライブラリーを使用し、棒グラフを描画する場合、ライブラリーはデータセットが以下のように配列されることを想定しています。

Image Removed

こちらの例では、options. dataset. dataをこちらの形式に変更することができます。下記は、demographicとinvoiced amountを含むデータセットを使用した例です。

Image Removed

有益なヒント

以下に、JavaScript グラフの構築を支援する有益なヒントを提供します。

• デバッグが必要な時にJavaScript用のデバッグポイントをトリガーにするには、「debigger」JavaScript文を使用しましょう。これにより、ブラウザーの開発コンソールで安全に実行できる一時停止が呼び出されます。
• CSSクラス「jsChartNoOverflow」を追加することで、Yellowfinはスクロールバーを停止するためにchart divを定義します。
  例：
  Image Removed
  必要な構文でtry/catchブロックを使用することですべてのエラーを表示し、データセットに定義されているコールバックエラー関数を以下のように使用することで、生成されたエラーが他のグラフのエラーと同様のルックアンドフィールを持つようにします。Yellowfinはまた、JavaScript エラーをブラウザーコンソールに表示して、これをデバッグすることができます。
  例：
  Image Removed
• さらにデータを処理し、変更するが、現在の形式が不明な場合、ブラウザーの開発コンソールにログインし、参照することができます。ログインをするためには、JavaScript コードに以下を含めます。
  例：
  Image Removed
• JavaScript グラフを作成中に、現在何がオプションJSONオブジェクトに含まれているか不明な場合は、以下を使用することで、オブジェクト全体を長いJSON文字列に出力することができます。
  Image Removed
  これは、ブラウザーの開発コンソールにログインをして取得されます。JSON文字列全体をコピーし、JSONフォーマッターでこれを参照することができます。
  例：https://jsonformatter.curiousconcept.com/