このサイトで JavaScript が必要です。

バージョン

Is this content useful?

Thank you for your feedback!

Thank you for your feedback! You have rated this topic in the last 30 days.

igSparkline を HTML ドキュメントに追加

トピックの概要

目的

このトピックは、igSparkline™ を HTML ページに追加し JavaScript 配列へバインドする方法を示します。

前提条件

以下の表は、このトピックを理解するための前提条件として必要な概念、トピック、および記事の一覧です。

jQuery セレクター

トピック

igSparkline の概要: このトピックは、igSparkline コントロールの概要、その利点、およびサポートされるチャートタイプを提供します。
igSparkline の追加の概要: このトピックでは、igSparkline™ をアプリケーションに追加する各種方法の概要について説明します。
必要なリソースの手動で追加する: このトピックでは、Ignite UI for jQuery®での JavaScript リソースの構成について説明します。
Ignite UI for jQuery で JavaScript リソースを使用: このトピックは、必要な JavaScript リソースを追加して Ignite UI for jQuery ライブラリからコントロールを使用する場合の全般的なガイダンスを提供します。

外部リソース

jQuery UI ウィジェットファクトリ

このトピックの内容

このトピックは、以下のセクションで構成されます。

igSparkline を HTML ドキュメントに追加 - 概要

igSparkline 追加の概要

igSparkline は、一連のデータオブジェクトを描画する必要のあるデータバインドコントロールです。コントロールは、HTML 要素、DIV をインスタンス化のベースとして機能させる必要があります。

データソースは、dataSource オプションで固有です。この例では、HTML でデータのインラインを定義します。配列は、AJAX 呼び出し、外部 JavaScript ファイル、またはその他の JavaScript 配列データの取得手段を介して取得できます。

igSparkline は、ドキュメントがリソースを取り込み終わると発生準備の整うドキュメント用関数で構成されます。

要件

以下の表で、igSparkline コントロールの要件を簡単に説明します。

要件/必要なリソース説明必要な作業

IG テーマこのテーマには、Ignite UI for jQuery ライブラリ用のビジュアルスタイルが含まれます。テーマファイル: css/themes/Infragistics/infragistics.theme.css

igSparkline CSS リソースファイル

以下の CSS ファイルからのスタイルは、コントロールの各種要素のレンダリングに使用されます。

CSS リソース	説明
`css/structure/modules/infragistics.ui.shared.css`	すべての Ignite UI for jQuery コントロールで共有される CSS スタイル
`css/structure/modules/infragistics.ui.html5.css`	HTML5 のブラウザーサポートに関連する CSS
`css/structure/modules/infragistics.ui.sparkline.css`	`igSparkline` ウィジェットに特有の CSS スタイル

ページのファイルに style 参照を追加します。

Modernizr ライブラリ (オプション)

Modernizr ライブラリは、ブラウザーとデバイス機能を検出するために igSparkline で使用されます。これは強制ではありませんが、含まれないとコントロールは HTML 互換ブラウザーで標準のデスクトップ環境であるかのように振る舞います。

Modernizr

ページの <head> セクションでライブラリにスクリプト参照を追加します。

jQuery および jQuery UI JavaScript リソース

Ignite UI for jQuery は、以下のフレームワークの最上部にビルドされます。

ページの <head> セクションで両方のライブラリにスクリプト参照を追加します。

全般的な igSparkline JavaScript リソース

Ignite UI for jQuery ライブラリの igSparkline 機能は、複数のファイルに渡って配布されます。必要なリソースは以下の方法で読み込むことができます。

infragistics.core.js と infragistics.dv.js の結合したファイルを使用して必要な JavaScript 依存関係を素早く参照します。
Infragistics® Loader (igLoader™) を使用します。必要なのは igLoader へのスクリプト参照をページに含めるか、 igSparkline をパラメータとして指定するのみです。igLoader は必要な個々の JavaScript ファイルと CSS ファイルを取り込みます。
必要なリソースを手動で読み込みます。以下の表にリストされる依存関係を使用する必要があります。

以下の表は、igSparkline コントロール関連の Ignite UI for jQuery ライブラリの依存関係をリストします。これらのリソースは、リソースを手動で取り込むことを選択する場合は明示的に参照される必要があります (igLoader は使用しない)。

JS リソース	説明
`js/modules/infragistics.util.js` `js/modules/infragistics.util.jquery.js`	Ignite UI for jQuery ユーティリティ
`js/modules/infragistics.ui.widget.js`	共有のウィジェット
`js/modules/Infragistics.datasource.js`	データソースフレームワーク
`js/modules/infragistics.templating.js`	`igTemplating` engine
`js/modules/infragistics.ext_core.js` `js/modules/infragistics.ext_collections.js` `js/modules/infragistics.ext_ui.js` `js/modules/infragistics.dv_jquerydom.js` `js/modules/infragistics.dv_core.js` `js/modules/infragistics.dv_geometry.js`	すべてのデータビジュアライゼーションコンポーネント用の共有ライブラリ
`js/modules/infragistics.dv_interactivity.js`	オプション。ツールチップなどのユーザーインタラクションのために必要です。
`js/modules/infragistics.ui.basechart.js`	すべての Ignite UI for jQuery チャートコンポーネントに対するベースウィジェット
`js/modules/infragistics.sparkline.js`	`igSparkline` ウィジェットの内部コアロジック
`js/modules/infragistics.ui.sparkline.js`	`igSparkline` ウィジェット

以下のいずれかを追加します。

igLoader への参照
すべての必要な JavaScript ファイルへの参照 (左側の表に一覧表示)

手順

igSparkline を HTML ドキュメントへ追加するための一般的な手順をおおまかに示すと、次のようになります。

必要な JavaScript および CSS ファイルを参照します。
igSparkline 用のターゲット要素を作成します。
JavaScript 配列を定義します。
ドキュメント内の igSparkline をインスタンス化する
基本的な描画オプションを構成します。

igSparkline の HTML ページへの追加

概要

この手順では、基本的な 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>
     
     <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>

Ignite UI | ヘルプトピック

igSparkline を HTML ドキュメントに追加

トピックの概要

目的

前提条件

このトピックの内容

igSparkline を HTML ドキュメントに追加 - 概要

igSparkline 追加の概要

要件

手順

igSparkline の HTML ページへの追加

概要

プレビュー

前提条件

概要

手順

関連コンテンツ

トピック

サンプル

Ignite UI | ヘルプ トピック

igSparkline を HTML ドキュメントに追加

トピックの概要

目的

前提条件

このトピックの内容

igSparkline を HTML ドキュメントに追加 - 概要

igSparkline 追加の概要

要件

手順

igSparkline の HTML ページへの追加

概要

プレビュー

前提条件

概要

手順

関連コンテンツ

トピック

サンプル

Ignite UI | ヘルプトピック