Page History

...

概要

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

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

グラフデータオプション

セキュリティ

JavaScript グラフ機能を有効にするために、管理者は二階層システムを使用しなくてはいけません。以下を実行します。グラフ機能を有効にするために、管理者は、以下の2項目を実行します。

• システム構成ページで、以下の項目を有効にします（「管理コンソール」＞「システム構成」＞「システム」＞「セキュリティ」＞「JavaScript グラフ」）。
• 選択したロールで、以下の機能を有効にします（選択したロールの「ロール詳細」画面＞「レポートビルダー」＞「JavaScript グラフ」）。
• システム構成ページで、以下の項目を有効にします（「管理コンソール」＞「システム構成」＞「システム」＞「セキュリティ」＞「JavaScript グラフ」）。
• 選択したロールで、以下の機能を有効にします（「ロール」＞「レポートビルダー」＞「JavaScript グラフ」）。

JavaScript グラフの作成者や編集者のために、新規ロールを設定することをお勧めします。これにより、JavaScript グラフ機能は厳重に管理され、必要の無い時には無効にすることができます。グラフ機能を厳重に管理し、必要の無い時には無効にすることもできます。

JavaScript 機能を有効にする方法は、こちらを参照してください。

おまかせグラフ

Image Removed

注意： おまかせグラフでは、一般的なグラフタイプである、棒グラフ、カラム（列）グラフ、散布図、線グラフが生成されます。特定のグラフタイプや、特殊グラフを作成したい場合は、画面右側の「グラフの選択」パネルから、対象のグラフタイプを選択します。

グラフの選択

Section

Column width 20% Image Removed Column width 80% Expand title 分析グラフ アイコン タイプ 主な用途 Image Removed 散布図 散布図は、互いに交わらない点を使用して、関連した2つの属性データを示します。関連しているデータ間でのみ、使用することができます。線形で表示することのできないデータの傾向を示す場合に有効です。 Image Removed ツリーマップ サイズの大小関係を使用して、メトリック（数値）の比較をします。階層的関係を示すために使用することもできます。 Image Removed ヒストグラム データセット内の度数分布を示します。 Image Removed 箱ひげグラフ シリーズの値や、それらの統計的属性を素早く把握することができます。 Image Removed 格子グラフ 指定したデータで分割したグラフを示します。 Image Removed ヒートグリッド 複数のカテゴリー間のメトリック（数値）の強度をプロットします。 より詳細な情報は、分析グラフを参照してください。 Expand title エリアグラフ アイコン タイプ 主な用途 Image Removed エリアグラフ 時系列に沿って、変化の大きさを強調したい時に使用します。時間経過に伴い、どの程度値が変化したのかを示す場合に有効です。 Image Removed 積み上げエリアグラフ 複数のカテゴリーを比較しながら、時系列に沿って、変化の大きさを強調したい時に使用します。 より詳細な情報は、エリアグラフを参照してください。 Expand title 棒グラフ アイコン タイプ 主な用途 Image Removed 横棒グラフ 値を水平方向に示し、簡単に比較ができるように強調表示をしたい時に使用します。時間軸はあまり重視せず、値の比較に着目したい場合に有効です。 Image Removed 3D横棒グラフ 横棒グラフと同様ですが、3D（三次元）で表示されます。 Image Removed 積み上げ横棒グラフ カテゴリー別にグループ化したり、積み上げたりすることで、データの比較を容易にします。全体に占める割合の比較が重要な場合に有効です。 Image Removed 横棒シリンダーグラフ 横棒グラフと同様ですが、シリンダー形式で表示されます。 Image Removed 比例棒グラフ 異なるカテゴリーの値が、そのカテゴリー内の最大値に、どれだけ近いかを示します。 より詳細な情報は、棒グラフを参照してください。 Expand title カラム（列）グラフ アイコン タイプ 主な用途 Image Removed 縦棒グラフ 値を縦方向に示し、簡単に比較ができるように強調表示したい時に使用します。時間軸はあまり重要視せず、値の比較に着目したい場合に有効です。 Image Removed 3D縦棒グラフ 縦棒グラフと同様ですが、3D（三次元）で表示されます。 Image Removed 積み上げ縦棒グラフ 積み上げカラム（列）グラフとも呼ばれます。全体に占める割合の比較が重要な場合に有効です。 Image Removed シリンダーグラフ 縦棒グラフと同様ですが、シリンダー形式で表示されます。 Image Removed 3D積み上げ縦棒グラフ 積み上げ縦棒グラフと同様ですが、3D（三次元）で表示されます。 Image Removed 重ね縦棒グラフ グラフを重ねることで、カテゴリーを通して、それぞれの値を比較します。 より詳細な情報は、カラム（列）グラフを参照してください。 Expand title コンビネーショングラフ アイコン タイプ 主な用途 Image Removed 複合カテゴリーグラフ 複合カテゴリーグラフでは、2つのグラフを上下に並べて表示することができます。データ間の関係性を強調し、より明確に示すことができます。 Image Removed オーバーレイグラフ 傾向を強調するために線グラフを使用し、特定の値を強調するために縦棒グラフを使用します。線グラフと縦棒グラフの組み合わせでは、縦棒グラフを淡色で表現し、強調しすぎないように示すことで、グラフを見やすくすることができます。 より詳細な情報は、コンビネーショングラフを参照してください。 Expand title ファイナンシャルグラフ アイコン タイプ 主な用途 Image Removed フィナンシャル・線グラフ 出来高を示すサブグラフとともに、日々の売買高を示します。 Image Removed ハイローグラフ 一日の高値、低値、初値、終値を示し、初値、終値に対応してチェックを付けます。 Image Removed ローソクグラフ 一日の高値、低値、初値、終値を、値動きに関連付けて色付きで示します。 より詳細な情報は、ファイナンシャルグラフを参照してください。 Expand title 線グラフ アイコン タイプ 主な用途 Image Removed 線グラフ 点のデータを線で結ぶことで、時間経過による傾向を示すことができます。多くのメトリック（数値）を表示したい場合に有効です。 Image Removed 3D線グラフ 線グラフと同様ですが、3D（三次元）で表示されます。 Image Removed Zグラフ 短期間の傾向を示す時に使用します。データ、累積合計、移動合計を表示します。 Image Removed 階段グラフ データの動きを直線ではなく、階段状に示します。 より詳細な情報は、線グラフを参照してください。 Expand title マップ アイコン タイプ 主な用途 Image Removed ラスターマップ GISの定義されたカラム（列）を持たない場合、ラスターマップを使用してヒートマップを作成することができます。これは、州や国ごとの収益のような、位置要素とともにメトリック（数値）を示す場合に有効です。 ラスターマップが定義されているマップのみ、表示することができます。 Image Removed Googleマップ Googleマップでは、関連するGoogleマップウィジェットを使用することで、Yellowfinのグラフとして表示されるGoogleマップ上に、位置データポイントを表示することができます。 Image Removed GIS Googleマップ マーカー座標にGISデータを使用するGoogleマップです。 Image Removed GISマップ GISマップでは、複雑なGISポリゴンを表示することができます。これは、レポートで利用可能なGISデータに基づき、その場で位置レポートを表示する場合に有効です。 Image Removed GISバブルマップ GISポイントによりバブルが位置付けられたバブルマップです。 Image Removed GISヒートマップ GISポイントを表す色が、強度や分布に基づき表示されます。 Expand title メーターグラフ アイコン タイプ 主な用途 Image Removed メーターグラフ 事前に定義された目標に対する、数値の変化率を図るために使用します。ダッシュボード上で使用するレポートに有効です。 Image Removed 温度計 メーターグラフを縦方向に表現したグラフであり、定性的指標の範囲を示します。 Image Removed ダイアルグラフ 業績評価指標（KPI）を監視するために使用します。 Image Removed デジタルグラフ メトリック（数値）値をデジタルで示します。 より詳細な情報は、メーターグラフを参照してください。 Expand title 円グラフ アイコン タイプ 主な用途 Image Removed 円グラフ 全体における内訳の関係性を示す時に使用します。実際の値ではなく、割合を強調して表示する場合に有効です。実際の値を示す必要がある場合、円グラフでは不適切です。 Image Removed 3D円グラフ 円グラフと同様ですが、3D（三次元）で表示されます。 Image Removed マルチ円グラフ 複数のコンポーネント内で、個別のコンポーネントサイズを強調する時に使用します。 Image Removed リンググラフ 円グラフと同様ですが、リング形式で表示されます。 より詳細な情報は、円グラフを参照してください。 Expand title 特殊用途グラフ アイコン タイプ 主な用途 Image Removed じょうごグラフ プロセスの進捗状態を示す時に使用します。 Image Removed 比例インフォグラフィック イメージを、メトリック（数値）の値に応じたサイズに分割して示します。 Image Removed 比較インフォグラフィック イメージを、メトリック（数値）の値に応じたサイズで示します。 Image Removed レーダーグラフ 複数の軸を、単一の放射線状に表示することで、データを比較します。 Image Removed 滝グラフ 滝グラフは、浮動縦棒グラフの特殊タイプです。典型的な滝グラフは、グラフの初期値が最終値に到着するまでに、どのように増減してるのかを示す場合に有効です。 Image Removed イベントグラフ 時系列で変化するデータセットに、発生したイベントを位置づけて表示します。 Image Removed 週密度グラフ 時間ごとの発生密度を、曜日ごとの発生密度に関連付けて示します。 より詳細な情報は、特殊用途グラフを参照してください。

グラフ選択ガイド

機能を有効にする方法は、こちらを参照してください。

JavaScript グラフ機能を無効にした場合

システム構成レベルで、JavaScript グラフ機能を「無効」にした場合は、以下の状況が発生します。

• すべてのJavaScript グラフの実行が停止します。
• JavaScript グラフを構成するすべてのJavaScript、またはCSSを、プラットフォームからエクスポートすることができません。
• プラットフォームへ、JavaScript グラフをインポートすることができません。

注意：JavaScript グラフ機能が有効化されたロールを付与されていないユーザーは、JavaScript グラフをインポートすることはできません。

グラフ作成者は、開発環境とテスト環境に関する適切なコンテンツ開発と移行戦略、および承認ワークフローを活用し、ガバナンスを確保することをお勧めします。

generateChart関数の使用

JavaScript グラフ作成時に必要な関数は、「generateChart」です。そのため、サンプルコード内に表示されている他の関数は推奨です。Yellowfinは、JavaScript コードを実行するために、「generateChart」を呼び出します。

Yellowfinから必要なすべてのオプションとデータは、Options JSONオブジェクトの一部として、generateChart関数へ送られます。

指定されたdiv（Options. divSelector）にすべてを描画し、データセットからIDを取得します。

JavaScript グラフの例

下記は、JavaScriptの非常にシンプルな例であり、Optionsオブジェクトを介して送信された幅と高さを使用し、グラフdivを紫に設定します。

Image Added

RequireとShim

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

Image Added

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

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

こちらは、Shimを使用して非AMDライブラリーであるVizJSを要求する例です。

Image Added

Options JSON オブジェクト

データセットの例

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

Image Added

divSelector (options.divSelector)

グラフの描画をするdivのIDを使用するCSSセレクターです。これは、JQuery、D3、またはCSSスタイルセレクターを使用するすべてのセレクターで使用することができます。

例：JQuery内でグラフdivを選択するためには、以下に従います。

var $chartDrawDiv = $(options.divSelector);

chartId (options. chartId)

現在のグラフのインターナルYellowfin IDです。

errorCallback (options.errorCallback)

Yellowfinのデフォルトエラーメッセージを表示するために呼び出す関数です。JavaScript グラフからのエラーメッセージを、Yellowfinのスタイリングと一貫して表示したい場合は、これを使用します。これは、発生したエラーをコンソールにも出力します。

dataset (options. dataset)

レポートデータや、いくつかのレンダリング情報を表す属性を持つオブジェクトです。データセットオブジェクトには、以下の属性が含まれます。

chart_information (options. dataset. chart_information)

グラフレンダリングに使用される情報を含むオブジェクトです。

• 高さと幅：グラフがレンダリングする領域の高さと幅の属性を含みます（ダッシュボードポートレット、キャンバスウィジェット、ストーリーボード、グラフビルダーの表示、JavaScript API）。レポートの表示ページに、レポートがひとつだけの場合に、グラフに設定される高さと幅になります。これらの値がJavaScript コンテナーで使用されていることを確認し、適切なサイズに変更してください。
• タイトル：グラフのタイトルが定義されている場合、データセットオブジェクトの一部になります。

metadata (options. dataset. metadata)

レポート内のフィールドの情報です。属性の名前は、レポート内のフィールドに基づきます（スペース付きの小文字はすべてアンダースコアに置き換えられ、重複するフィールド名は名前の末尾に数字が追加されます）。こちらで使用されるフィールド名は、データに使用されるフィールド名に対応します。メタデータ内で、下記のオブジェクトは、各フィールドにそれぞれの属性を含みます。

data (options. dataset. data)

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

attributes (options. dataset. attributes)

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

操作の背景

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

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

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

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

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

追加のデータ処理

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

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

下記は、自己定義されたprocessData関数を使用してデータを合計し、demographicとcamp ratingの合計を含むデータセットを返す場合のシンプルな例です。

Image Added

独自のprocessData関数定義は、以下のいずれかの方法で記述することができます。

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

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

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

Image Added

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

Image Added

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

Image Added

有益なヒント

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

制限事項

Image Removed

クロス集計グラフ

...

• JavaScriptグラフをエクスポートすることはできません。
• JavaScriptレポートは、レポートリンクとしてのみ、共有することができます。