このトピックは、igSparkline
™ を HTML ページに追加し JavaScript 配列へバインドする方法を示します。
以下の表は、このトピックを理解するための前提条件として必要な概念、トピック、および記事の一覧です。
トピック
igSparkline の概要: このトピックは、igSparkline
コントロールの概要、その利点、およびサポートされるチャート タイプを提供します。
igSparkline の追加の概要: このトピックでは、igSparkline
™ をアプリケーションに追加する各種方法の概要について説明します。
必要なリソースの手動で追加する: このトピックでは、Ignite UI for jQuery®での JavaScript リソースの構成について説明します。
Ignite UI for jQuery で JavaScript リソースを使用: このトピックは、必要な JavaScript リソースを追加して Ignite UI for jQuery ライブラリからコントロールを使用する場合の全般的なガイダンスを提供します。
外部リソース
このトピックは、以下のセクションで構成されます。
igSparkline
は、一連のデータ オブジェクトを描画する必要のあるデータ バインド コントロールです。コントロールは、HTML 要素、DIV をインスタンス化のベースとして機能させる必要があります。
データ ソースは、dataSource
オプションで固有です。この例では、HTML でデータのインラインを定義します。配列は、AJAX 呼び出し、外部 JavaScript ファイル、またはその他の JavaScript 配列データの取得手段を介して取得できます。
igSparkline
は、ドキュメントがリソースを取り込み終わると発生準備の整うドキュメント用関数で構成されます。
以下の表で、igSparkline
コントロールの要件を簡単に説明します。
要件/必要なリソース | 説明 | 必要な作業 | ||||||||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
IG テーマ | このテーマには、Ignite UI for jQuery ライブラリ用のビジュアル スタイルが含まれます。テーマ ファイル: css/themes/Infragistics/infragistics.theme.css | |||||||||||||||||||||
igSparkline CSS リソース ファイル
|
以下の CSS ファイルからのスタイルは、コントロールの各種要素のレンダリングに使用されます。
|
ページのファイルに style 参照を追加します。
|
||||||||||||||||||||
Modernizr ライブラリ (オプション) | Modernizr ライブラリは、ブラウザーとデバイス機能を検出するために igSparkline で使用されます。これは強制ではありませんが、含まれないとコントロールは HTML 互換ブラウザーで標準のデスクトップ環境であるかのように振る舞います。 |
ページの <head> セクションでライブラリにスクリプト参照を追加します。
|
||||||||||||||||||||
jQuery および jQuery UI JavaScript リソース | Ignite UI for jQuery は、以下のフレームワークの最上部にビルドされます。 |
ページの <head> セクションで両方のライブラリにスクリプト参照を追加します。
|
||||||||||||||||||||
全般的な igSparkline JavaScript リソース
|
Ignite UI for jQuery ライブラリの igSparkline 機能は、複数のファイルに渡って配布されます。必要なリソースは以下の方法で読み込むことができます。
igLoader は使用しない)。
|
以下のいずれかを追加します。
|
igSparkline
を HTML ドキュメントへ追加するための一般的な手順をおおまかに示すと、次のようになります。
必要な JavaScript および CSS ファイルを参照します。
igSparkline
用のターゲット要素を作成します。
JavaScript 配列を定義します。
ドキュメント内の igSparkline
をインスタンス化する
基本的な描画オプションを構成します。
この手順では、基本的な igSparkline
を HTML ページへ追加し基本的なオプションを構成してデータを供給し高さと幅を構成します。igSparkline
は、一定期間出された注文ごとに総数を示します。
データ構造には、注文数を含む ExtendedPrice
と、購入注文日を含む OrderDate
フィールドが含まれます。igSparkline
の valueMemberPath
は ExtendedPrice
に設定され、labelMemberPath
は OrderDate
に設定されます。
以下のスクリーンショットは結果のプレビューです。
空白の HTML ドキュメント
必要な JavaScript および CSS ファイルを参照します。
igSparkline
用のターゲット要素を作成します。
JavaScript 配列を定義します。
ドキュメント内の igSparkline
をインスタンス化する
基本的な描画オプションを構成します。
これらの手順に従って、igSparkline
を HTML ドキュメントに追加します。
必要な JavaScript および CSS ファイルの参照
HTML ドキュメントに JavaScript および CSS ファイルの依存関係を設定します。
HTML の場合:
```html
<!DOCTYPE html>
<html>
<head>
<title></title>
<!-- Ignite UI for jQuery Required Combined CSS Files -->
<link href="../../igniteui/css/themes/infragistics/infragistics.theme.css" rel="stylesheet" />
<link href="../../igniteui/css/structure/infragistics.css" rel="stylesheet" />
<script src="../../js/modernizr.min.js"></script>
<script src="../../js/jquery.min.js"></script>
<script src="../../js/jquery-ui.min.js"></script>
<!-- Ignite UI for jQuery Required Combined JavaScript Files -->
<script src="../../igniteui/js/infragistics.core.js"></script>
<script src="../../igniteui/js/infragistics.dv.js"></script>
</head>
<body>
</body>
</html>
```
igSparkline
用のターゲット要素を作成します。
igSparkline
ウィジェットをインスタンス化する HTML 本文内に DIV 要素を作成します。
HTML の場合:
<body>
<!-- Target element for the igSparkline -->
<div id="sparkline"></div>
…
JavaScript 配列を定義する
JavaScript 配列を定義します。
HTML の場合:
<body>
<script>
var invoices = [
{"OrderDate": "/Date(836452800000)/", "ExtendedPrice": 168.0000},
{ "OrderDate": "/Date(836452800000)/", "ExtendedPrice": 98.0000},
{ "OrderDate": "/Date(836452800000)/", "ExtendedPrice": 174.0000},
{ "OrderDate": "/Date(836539200000)/", "ExtendedPrice": 167.4000},
{ "OrderDate": "/Date(836539200000)/", "ExtendedPrice": 1696.0000},
{ "OrderDate": "/Date(836798400000)/", "ExtendedPrice": 77.0000},
{ "OrderDate": "/Date(836798400000)/", "ExtendedPrice": 1261.4000},
{ "OrderDate": "/Date(836798400000)/", "ExtendedPrice": 214.2000},
{ "OrderDate": "/Date(836798400000)/", "ExtendedPrice": 95.7600},
{ "OrderDate": "/Date(836798400000)/","ExtendedPrice": 222.3000}
];
</script>
</body>
ドキュメント内の igSparkline
をインスタンス化する
以前に定義されたターゲット要素のセレクターを使用してウィジェットをインスタンス化します。
HTML の場合:
<script>
$(function () {
$("#sparkline").igSparkline({
});
});
</script>
基本的な描画オプションを構成する
igSparkline
をインスタンス化する場合、dataSource、valueMemberPath
、labelMemberPath
、height および width の各オプションを構成します。
HTML の場合:
$("#sparkline").igSparkline({
dataSource: invoices,
height: "100px",
width: "300px",
valueMemberPath: 'ExtendedPrice',
labelMemberPath: 'OrderDate'
});
完全なコード
HTML の場合:
<!DOCTYPE html>
<html>
<head>
<title></title>
<!-- Ignite UI for jQuery Required Combined CSS Files -->
<link href="../../igniteui/css/themes/infragistics/infragistics.theme.css" rel="stylesheet" />
<link href="../../igniteui/css/structure/infragistics.css" rel="stylesheet" />
<script src="../../js/modernizr.min.js"></script>
<script src="../../js/jquery.min.js"></script>
<script src="../../js/jquery-ui.min.js"></script>
<!-- Ignite UI for jQuery Required Combined JavaScript Files -->
<script src="../../igniteui/js/infragistics.core.js"></script>
<script src="../../igniteui/js/infragistics.dv.js"></script>
</head>
<body>
<!-- Target element for the igSparkline -->
<div id="sparkline"></div>
<script>
var invoices = [
{"OrderDate": "/Date(836452800000)/", "ExtendedPrice": 168.0000},
{ "OrderDate": "/Date(836452800000)/", "ExtendedPrice": 98.0000},
{ "OrderDate": "/Date(836452800000)/", "ExtendedPrice": 174.0000},
{ "OrderDate": "/Date(836539200000)/", "ExtendedPrice": 167.4000},
{ "OrderDate": "/Date(836539200000)/", "ExtendedPrice": 1696.0000},
{ "OrderDate": "/Date(836798400000)/", "ExtendedPrice": 77.0000},
{ "OrderDate": "/Date(836798400000)/", "ExtendedPrice": 1261.4000},
{ "OrderDate": "/Date(836798400000)/", "ExtendedPrice": 214.2000},
{ "OrderDate": "/Date(836798400000)/", "ExtendedPrice": 95.7600},
{ "OrderDate": "/Date(836798400000)/","ExtendedPrice": 222.3000}
];
$(function () {
$("#sparkline").igSparkline({
dataSource: invoices,
height: "100px",
width: "300px",
valueMemberPath: 'ExtendedPrice',
labelMemberPath: 'OrderDate'
});
});
</script>
</body>
</html>
このトピックの追加情報については、以下のトピックも合わせてご参照ください。
igSparkline を ASP.NET MVC ビューに追加: このトピックでは、ASP.NET MVC ビューでの igSparkline
インスタンス作成とオブジェクトの .NET コレクションへのバインドを見てみます。
jQuery と MVC API リンク (igSparkline): このトピックでは、igSparkline
コントロールのための jQuery と ASP.NET MVC ヘルパー クラスのAPIドキュメントへのリンクを提供します。
以下のサンプルでは、このトピックに関連する情報を提供しています。
オンラインで表示: GitHub