30日間の無料評価版をお試しいただけます。

Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

...

Table of Contents
classcontents

概要

Styleclass
ClasstopLink

ページトップ

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

...

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

グラフデータオプション

オプション説明
JavaScript コードパネルJavaScript コードの入力に使用します。

CSSパネル

CSSコードの提供に使用します。
プレビューパネルコーディングした内容のプレビューを生成します。

セキュリティ

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 Added

RequireとShim

Styleclass
ClasstopLink

ページトップ

おまかせグラフ機能は、グラフ作成に必要な一般的なコンポーネントを定義するための項目が用意されており、ドラッグしたフィールドに基づいてグラフを生成します。

Image Removed

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

...

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

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

Image Added

 

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

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

 

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

Image Added

Options JSON オブジェクト

Styleclass
ClasstopLink

ページトップ

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

Section
Column
width20%

Column
width80%
Expand
title分析グラフ
アイコンタイプ主な用途

散布図

散布図は、互いに交わらない点を使用して、関連した2つの属性データを示します。関連しているデータ間でのみ、使用することができます。線形で表示することのできないデータの傾向を示す場合に有効です。

ツリーマップサイズの大小関係を使用して、メトリック(数値)の比較をします。階層的関係を示すために使用することもできます。

ヒストグラム

データセット内の度数分布を示します。

箱ひげグラフ

シリーズの値や、それらの統計的属性を素早く把握することができます。

格子グラフ

指定したデータで分割したグラフを示します。

ヒートグリッド

複数のカテゴリー間のメトリック(数値)の強度をプロットします。

より詳細な情報は、分析グラフを参照してください。

Expand
titleエリアグラフ
アイコンタイプ主な用途

エリアグラフ

時系列に沿って、変化の大きさを強調したい時に使用します。時間経過に伴い、どの程度値が変化したのかを示す場合に有効です。

積み上げエリアグラフ

複数のカテゴリーを比較しながら、時系列に沿って、変化の大きさを強調したい時に使用します。

より詳細な情報は、エリアグラフを参照してください。

Expand
title棒グラフ
アイコンタイプ主な用途

横棒グラフ

値を水平方向に示し、簡単に比較ができるように強調表示をしたい時に使用します。時間軸はあまり重視せず、値の比較に着目したい場合に有効です。

3D横棒グラフ

横棒グラフと同様ですが、3D(三次元)で表示されます。

積み上げ横棒グラフ

カテゴリー別にグループ化したり、積み上げたりすることで、データの比較を容易にします。全体に占める割合の比較が重要な場合に有効です。

横棒シリンダーグラフ

横棒グラフと同様ですが、シリンダー形式で表示されます。

比例棒グラフ

異なるカテゴリーの値が、そのカテゴリー内の最大値に、どれだけ近いかを示します。

より詳細な情報は、棒グラフを参照してください。

Expand
titleカラム(列)グラフ
アイコンタイプ主な用途

縦棒グラフ

値を縦方向に示し、簡単に比較ができるように強調表示したい時に使用します。時間軸はあまり重要視せず、値の比較に着目したい場合に有効です。

3D縦棒グラフ

縦棒グラフと同様ですが、3D(三次元)で表示されます。

積み上げ縦棒グラフ

積み上げカラム(列)グラフとも呼ばれます。全体に占める割合の比較が重要な場合に有効です。

シリンダーグラフ

縦棒グラフと同様ですが、シリンダー形式で表示されます。

3D積み上げ縦棒グラフ

積み上げ縦棒グラフと同様ですが、3D(三次元)で表示されます。

重ね縦棒グラフ

グラフを重ねることで、カテゴリーを通して、それぞれの値を比較します。

より詳細な情報は、カラム(列)グラフを参照してください。

Expand
titleコンビネーショングラフ
アイコンタイプ主な用途

複合カテゴリーグラフ

複合カテゴリーグラフでは、2つのグラフを上下に並べて表示することができます。データ間の関係性を強調し、より明確に示すことができます。

オーバーレイグラフ

傾向を強調するために線グラフを使用し、特定の値を強調するために縦棒グラフを使用します。線グラフと縦棒グラフの組み合わせでは、縦棒グラフを淡色で表現し、強調しすぎないように示すことで、グラフを見やすくすることができます。

より詳細な情報は、コンビネーショングラフを参照してください。

Expand
titleファイナンシャルグラフ
アイコンタイプ主な用途

フィナンシャル・線グラフ

出来高を示すサブグラフとともに、日々の売買高を示します。

ハイローグラフ

一日の高値、低値、初値、終値を示し、初値、終値に対応してチェックを付けます。

ローソクグラフ

一日の高値、低値、初値、終値を、値動きに関連付けて色付きで示します。

より詳細な情報は、ファイナンシャルグラフを参照してください。

Expand
title線グラフ
アイコンタイプ主な用途

線グラフ

点のデータを線で結ぶことで、時間経過による傾向を示すことができます。多くのメトリック(数値)を表示したい場合に有効です。

3D線グラフ

線グラフと同様ですが、3D(三次元)で表示されます。

Zグラフ

短期間の傾向を示す時に使用します。データ、累積合計、移動合計を表示します。

階段グラフ

データの動きを直線ではなく、階段状に示します。

より詳細な情報は、線グラフを参照してください。

Expand
titleマップ
アイコンタイプ主な用途

ラスターマップ

GISの定義されたカラム(列)を持たない場合、ラスターマップを使用してヒートマップを作成することができます。これは、州や国ごとの収益のような、位置要素とともにメトリック(数値)を示す場合に有効です。

ラスターマップが定義されているマップのみ、表示することができます。

Googleマップ

Googleマップでは、関連するGoogleマップウィジェットを使用することで、Yellowfinのグラフとして表示されるGoogleマップ上に、位置データポイントを表示することができます。

GIS Googleマップ

マーカー座標にGISデータを使用するGoogleマップです。

GISマップ

GISマップでは、複雑なGISポリゴンを表示することができます。これは、レポートで利用可能なGISデータに基づき、その場で位置レポートを表示する場合に有効です。

GISバブルマップ

GISポイントによりバブルが位置付けられたバブルマップです。

GISヒートマップ

GISポイントを表す色が、強度や分布に基づき表示されます。

Expand
titleメーターグラフ
アイコンタイプ主な用途

メーターグラフ

事前に定義された目標に対する、数値の変化率を図るために使用します。ダッシュボード上で使用するレポートに有効です。

温度計

メーターグラフを縦方向に表現したグラフであり、定性的指標の範囲を示します。

ダイアルグラフ

業績評価指標(KPI)を監視するために使用します。

デジタルグラフ

メトリック(数値)値をデジタルで示します。

より詳細な情報は、メーターグラフを参照してください。

Expand
title円グラフ
アイコンタイプ主な用途

円グラフ

全体における内訳の関係性を示す時に使用します。実際の値ではなく、割合を強調して表示する場合に有効です。実際の値を示す必要がある場合、円グラフでは不適切です。

3D円グラフ

円グラフと同様ですが、3D(三次元)で表示されます。

マルチ円グラフ

複数のコンポーネント内で、個別のコンポーネントサイズを強調する時に使用します。

リンググラフ

円グラフと同様ですが、リング形式で表示されます。

より詳細な情報は、円グラフを参照してください。

Expand
title特殊用途グラフ
アイコンタイプ主な用途

じょうごグラフ

プロセスの進捗状態を示す時に使用します。

比例インフォグラフィック

イメージを、メトリック(数値)の値に応じたサイズに分割して示します。

比較インフォグラフィック

イメージを、メトリック(数値)の値に応じたサイズで示します。

レーダーグラフ

複数の軸を、単一の放射線状に表示することで、データを比較します。

滝グラフ

滝グラフは、浮動縦棒グラフの特殊タイプです。典型的な滝グラフは、グラフの初期値が最終値に到着するまでに、どのように増減してるのかを示す場合に有効です。

イベントグラフ

時系列で変化するデータセットに、発生したイベントを位置づけて表示します。

週密度グラフ

時間ごとの発生密度を、曜日ごとの発生密度に関連付けて示します。

より詳細な情報は、特殊用途グラフを参照してください。

グラフ選択ガイド

Styleclass
ClasstopLink

ページトップ

 

クロス集計グラフ

Styleclass
ClasstopLink

ページトップ

Wiki Markup
{html}<iframe width="700" height="394" src="https://www.youtube.com/embed/Jh8CH-DMH9I?color=white" frameborder="0" allowfullscreen></iframe>{html}
 

horizontalrule
Styleclass
ClasstopLink

ページトップ