Page Comparison

...

Table of Contents

class	contents

概要

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

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 オブジェクト

選択できるグラフのタイプは、以下の通りです。一度タイプを選択した後でも、簡単に他のタイプに切り替えることができるので、他のタイプでの見え方を確認することもできます。

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	週密度グラフ	時間ごとの発生密度を、曜日ごとの発生密度に関連付けて示します。