このトピックでは、 HTML ページへ igPivotView
コンポーネントを追加する方法についての概念と詳しい手順を説明します。
このトピックを理解するために、以下のトピックを参照することをお勧めします。
Ignite UI for jQuery で JavaScript リソースを使用: このトピックでは、必要な JavaScript リソースを追加して Ignite UI for jQuery ライブラリからコントロールを使用する場合の全般的な説明をします。
igPivotView 概要: このトピックは、主要機能、最小要件およびユーザー機能性など、igPivotView
コントロールに関する概念的な情報を提供します。
このトピックは、以下のセクションで構成されます。
igPivotView
は、igOlapFlatDataSource
™ または igOlapXmlaDataSource
™ のインスタンスを使用して操作します。したがって、igPivotView
を HTML ページに追加する場合、内部で作成できるように、事前に構成されたデータ ソース インスタンスを提供するか、必要なオプションを指定する必要があります。
データ ソースは、igPivotView
の dataSource パラメータまたは dataSourceOptions プロパティを介して指定します。データ ソースの設定は、igPivotView
の初期化時に唯一設定しなければならない強制オプションです。
次の表は、igPivotView
コントロールを使用する際に必要な事項を要約したものです。
要件/必要なリソース | 説明 | 必要な作業 | ||||||||||||||||||||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
jQuery および jQuery UI JavaScript リソース | Ignite UI for jQuery™ は、これらのフレームワークの最上位にビルドされます。 |
ページの <head> セクションで両方のライブラリにスクリプト参照を追加します。
|
||||||||||||||||||||||||||||||||
Modernizr ライブラリ (オプション) | Modernizr ライブラリは、ブラウザとデバイス機能を検出するために igPivotView で使用されます。これは強制ではありませんが、含まれないとコントロールは HTML 互換ブラウザーで標準のデスクトップ環境であるかのように振る舞います。 |
ページの <head> セクションでライブラリにスクリプト参照を追加します。
|
||||||||||||||||||||||||||||||||
全般的な igPivotView JavaScript リソース |
Ignite UI for jQuery ライブラリの igPivotView 機能性は、複数のファイルに渡って配布されます。必要なリソースは以下の方法で読み込むことができます。
|
以下のいずれかを追加します。
|
||||||||||||||||||||||||||||||||
IG テーマ (オプション) |
このテーマには、Ignite UI for jQuery ライブラリ用のビジュアル スタイルが含まれます。テーマ ファイル:
|
|||||||||||||||||||||||||||||||||
igPivotView CSS リソース ファイル |
以下の CSS ファイルからのスタイルは、コントロールの各種要素のレンダリングに使用されます。
|
ページのファイルにスタイル参照を追加します。 |
igPivotView
を HTML ページへ追加するための一般的な手順をおおまかに示すと、次のようになります。
必要なリソースへの参照を追加する
igPivotView
で必要な HTML マークアップを追加する
データ ソースを追加する
igPivotView
を初期化する
以下の手順は、Adventure Works サンプル データベースをビジュアル化する HTML アプリケーションに igPivotView
コンポーネントを追加する方法をコード例を用いて説明します。プロシージャは Infragistics Loader (igLoader
) を使用して、推奨オプションである必要なリソースを参照します。
以下のスクリーンショットは最終結果のプレビューです。
この手順を実行するには、以下のリソースが必要です。
$.ig.OlapXmlaDataSource
オブジェクトまたは $.ig.OlapFlatDataSource
オブジェクトのインスタンス必要なリソースへの参照を追加する
igPivotView
で必要な HTML マークアップを追加する
データ ソースを追加する
igPivotView
を初期化する
以下の手順では、jQuery igPivotView
を初期化する方法を紹介します。
必要なリソースへの参照を追加します。
必要なファイルを構造化します。
A. jQuery、jQueryUI および Modernizr JavaScript のリソースを Web ページが置かれているディレクトリ内に Scripts という名前のフォルダーに追加します。
B. Content/ig という名前のフォルダーに Ignite UI for jQuery CSS ファイルを追加します (詳細は、Ignite UI for jQuery のスタイル設定とテーマ設定のトピックを参照してください)。
C. Ignite UI for jQuery JavaScript ファイルを Web サイト またはアプリケーション内の Scripts/ig という名前のフォルダーに追加します (詳細は 「Ignite UI for jQuery での JavaScript リソースの使用」 トピックを参照)。
必要な JavaScript ライブラリへの参照を追加します。jQuery、jQuery UI および Modernizr ライブラリの参照をページの <head>
セクションに追加します。
HTML の場合:
<script type="text/javascript" src="Scripts/jquery.js"></script>
<script type="text/javascript" src="Scripts/jquery-ui.js"></script>
<script type="text/javascript" src="Scripts/modernizr.js"></script>
igLoader
への参照を追加します。ページ内に igLoader
スクリプトを含めます。
HTML の場合:
<script type="text/javascript" src="Scripts/ig/infragistics.loader.js"></script>
必要なリソースをロードします。
igLoader をインスタンス化します。
HTML の場合:
<script type="text/javascript">
igPivotView
で必要な HTML マークアップを追加します。
HTML ページに “dataSelector
” の id
で div
タグを作成します。
HTML の場合:
<div id="pivotView"></div>
データ ソースを追加します。
igLoader の ready イベント ハンドラーでは、データ ソース宣言を追加します。
JavaScript の場合:
var dataSource = new $.ig.OlapXmlaDataSource({
serverUrl: "http://sampledata.infragistics.com/olap/msmdpump.dll",
catalog: "Adventure Works DW Standard Edition",
cube: "Adventure Works",
measureGroup: "Internet Sales",
rows: "[Sales Territory].[Sales Territory]",
columns: "[Product].[Product Categories]",
measures: "[Measures].[Internet Order Count],[Measures].[Internet Gross Profit Margin]"
});
このデータ ソースを IE で正しく操作するには、データ ソース宣言を追加する前に、jQuery クロスオリジン要求のサポートを true に設定する必要があります。
JavaScript の場合:
$.support.cors = true;
igPivotView
を初期化します。
igPivotView をロードするには、データ ソースの宣言後に以下のコードを追加しなければなりません。
JavaScript の場合:
$("#pivotView").igPivotView({
dataSource: dataSource
});
以下は、igPivotView の dataSourceOptionsプロパティを使用してデータ ソースを指定するオルタナティブな (直接の) 方法です。(「igPivotView 追加の概要」を参照)
JavaScript の場合:
$("#dataSelector").igPivotView({
dataSourceOptions: {
xmlaOptions: {
serverUrl: " http://sampledata.infragistics.com/olap/msmdpump.dll ",
catalog: "Adventure Works DW Standard Edition ",
cube: "Adventure Works",
measureGroup: "Internet Sales",
}
rows: "[Sales Territory].[Sales Territory]",
columns: "[Product].[Product Categories]",
measures: "[Measures].[Internet Order Count],[Measures].[Internet Gross Profit Margin]"
}
});
このトピックの追加情報については、以下のトピックも合わせてご参照ください。
igPivotView
コントロールを追加する方法についての概念と詳しい手順を説明します。このトピックについては、以下のサンプルも参照してください。
フラット データ ソースへのバインド: このサンプルでは、igPivotView
を igOlapFlatDataSource
にバインドする方法を紹介します。
XMLA にバインドした KPI の表示: このサンプルでは、igPivotView
を igOlapXmlaDataSource
にバインドする方法を紹介します。
オンラインで表示: GitHub