バージョン

igDoughnutChart の HTML ページへの追加

トピックの概要

目的

このトピックは、igDoughnutChart™ を HTML ページに追加する方法を説明します。

前提条件

このトピックを理解するために、以下のトピックを参照することをお勧めします。

  • 必要なリソースの手動で追加する: このトピックは、必要な JavaScript リソースを追加して Ignite UI for jQuery ライブラリからコントロールを使用する場合の全般的なガイダンスを提供します。

  • igDoughnutChart の概要: このトピックは、igDoughnutChart コントロールの概要を説明します。

このトピックの内容

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

igDoughnutChart を HTML ページに追加 - 概要

ドーナツ型チャートは、カテゴリ データをパーセンテージで表示する場合に使用します。中央の円がくりぬかれ、内径が構成可能で、同心リングを使用するドーナツ型チャートは、複数のシリーズを表示することができます。プロパティを構成するかテーマを適用することで、チャートのスタイルを設定できます。

要件

以下の表で、igDoughnutChart コントロールを使用するための要件を簡単に説明します。

必要なリソース 説明 必要な作業
jQuery および jQuery UI JavaScript リソース Ignite UI for jQuery™ は、以下のフレームワークをもとにビルドされます。 ページの <head> セクションで両方のライブラリにスクリプト参照を追加します。
igDoughnutChart CSS リソース ファイル コントロールの各種の要素の描画には、以下の CSS ファイルからのスタイルを使用します。
<IG CSS root>/structure/modules/infragistics.ui.html5.css
<IG CSS root>/structure/modules/infragistics.ui.shared.css
<IG CSS root>/structure/modules/infragistics.ui.chart.css
全般的な igDoughnutChart JavaScript リソース igDoughnutChart コントロールは、Ignite UI for jQuery ライブラリ内の複数のファイルで提供される機能に依存します。以下のいずれかの方法で、必要なリソースを読み込みます。
  • Infragistics® Loader (igLoader™) を使用します。ページ上に igLoader へのスクリプト参照を含めるのみです。
  • 必要なリソースの手動による読み込み以下の表にリストされる依存関係を使用する必要があります。
  • Ignite UI for jQuery パッケージのすべてのデータ ビジュアライゼーション コントロールのロジックを含む 2 つの結合ファイル (infragistics.core.js および infragistics.dv.js) の読み込み
以下の表は、igDoughnutChart コントロール関連の Ignite UI for jQuery ライブラリの依存関係を示します。igLoader または結合ファイルを使用しない場合は、以下のリソースを参照してください。
JS リソース 説明
infragistics.util.js
infragistics.util.jquery.js 		Ignite UI for jQuery ユーティリティ
infragistics.datasource.js データ ソース フレームワーク
infragistics.templating.js テンプレート エンジン (igTemplate™)
infragistics.ui.widget.js すべての Ignite UI for jQuery ウィジェットの基本 igWidget。
infragistics.ext_core.js,
infragistics.ext_collections.js,
infragistics.ext_ui.js,
infragistics.dv_jquerydom.js,
infragistics.dv_core.js,
infragistics.dv_geometry.js 		データ可視化コア機能
infragistics.datachart_core.js 共有チャート ビジュアライゼーションの機能
infragistics.dv_interactivity.js パンニング、ズーム、ドラッグなどのユーザー インタラクションのサポートを提供します。
infragistics.piechart.js 円チャート ビジュアライゼーション ロジック
infragistics.doughnutchart.js ドーナツ型チャート ビジュアライゼーション ロジック
infragistics.legend.js 凡例機能の共有チャート コード
infragistics.dvcommonwidget.js チャートおよびマップの共通ウィジェット
infragistics.ui.chartlegend.js igChartLegend™ コントロールは、Ignite UI for jQuery のすべてのチャート コントロールに共通します。
infragistics.ui.basechart.js チャート ウィジェット用の共通コード
infragistics.ui.chart.js igDataChart ウィジェット UI コード
infragistics.ui.doughnutchart.js igDoughnutChart ウィジェット UI コード

以下のいずれかを追加します。
  • igLoader への参照
  • すべての必要な JavaScript ファイルへの参照 (左側の表に一覧表示)
IG テーマ (オプション) このテーマには、Ignite UI for jQuery ライブラリ用のビジュアル スタイルが含まれます。テーマ ファイル: <IG CSS root>/themes/Infragistics/infragistics.theme.css

手順

igDoughnutChart を HTML ページへ追加するための一般的な手順を簡単に示すと、以下のようになります。

  1. 必要な JavaScript および CSS ファイルの参照
  2. サンプル データの追加
  3. igDoughnutChart のターゲット要素の作成
  4. document ready での igDoughnutChart のインスタンス作成
  5. シリーズの構成

igDoughnutChart の HTML ページへの追加

この手順では、igDoughnutChart のインスタンスを HTML ページに追加し、コントロールの基本的なオプションであるサイズを構成し、name、dataSource および valueMemberPath を使用して、1 つのシリーズを定義します。

プレビュー

以下のスクリーンショットは結果のプレビューです。

前提条件

空白の HTML ページ

概要

  1. 必要な JavaScript および CSS ファイルの参照
  2. サンプル データの追加
  3. igDoughnutChart 用のターゲット要素の作成
  4. document ready での igDoughnutChart のインスタンス作成
  5. シリーズの構成

手順

これらの手順に従って、HTML ページに igDoughnutChart を追加します。

  1. 必要な JavaScript および CSS ファイルを参照します。

    HTML の場合:

     <!DOCTYPE html>
 <html>
 <head>
 <!-- Ignite UI for jQuery IG Theme CSS File -->
 <link href="../../igniteui/css/themes/infragistics/infragistics.theme.css" rel="stylesheet" />
 <!-- Ignite UI for jQuery Required CSS File -->
 <link rel="stylesheet" type="text/css" href="../../igniteui/css/structure/modules/infragistics.ui.html5.css"/>
 <link rel="stylesheet" type="text/css" href="../../igniteui/css/structure/modules/infragistics.ui.shared.css"/>
 <link rel="stylesheet" type="text/css" href="../../igniteui/css/structure/modules/infragistics.ui.chart.css"/>
 <!-- jQuery Files -->
 <script src="../../js/jquery.min.js"></script>
 <script src="../../js/jquery-ui.min.js"></script>
 <!-- Ignite UI for jQuery Required JavaScript Files -->
 <script src="../../igniteui/js/modules/infragistics.util.js" type="text/javascript"></script>
 <script src="../../igniteui/js/modules/infragistics.util.jquery.js" type="text/javascript"></script>
 <script src="../../igniteui/js/modules/infragistics.ui.widget.js" type="text/javascript"></script>
 <script src="../../igniteui/js/modules/infragistics.datasource.js" type="text/javascript"></script>
 <script src="../../igniteui/js/modules/infragistics.templating.js" type="text/javascript"></script>
 <script src="../../igniteui/js/modules/infragistics.ext_core.js" type="text/javascript"></script>
 <script src="../../igniteui/js/modules/infragistics.ext_collections.js" type="text/javascript"></script>
 <script src="../../igniteui/js/modules/infragistics.ext_ui.js" type="text/javascript"></script>
 <script src="../../igniteui/js/modules/infragistics.dv_jquerydom.js" type="text/javascript"></script>
 <script src="../../igniteui/js/modules/infragistics.dv_core.js" type="text/javascript"></script>
 <script src="../../igniteui/js/modules/infragistics.legend.js" type="text/javascript"></script>
 <script src="../../igniteui/js/modules/infragistics.dv_geometry.js" type="text/javascript"></script>
 <script src="../../igniteui/js/modules/infragistics.dv_interactivity.js" type="text/javascript"></script>
 <script src="../../igniteui/js/modules/infragistics.datachart_core.js" type="text/javascript"></script>
 <script src="../../igniteui/js/modules/infragistics.dvcommonwidget.js" type="text/javascript"></script>
 <script src="../../igniteui/js/modules/infragistics.ui.chartlegend.js" type="text/javascript"></script>
 <script src="../../igniteui/js/modules/infragistics.ui.chart.js" type="text/javascript"></script>
 <script src="../../igniteui/js/modules/infragistics.piechart.js" type="text/javascript"></script>
 <script src="../../igniteui/js/modules/infragistics.doughnutchart.js" type="text/javascript"></script>
 <script src="../../igniteui/js/modules/infragistics.ui.basechart.js" type="text/javascript"></script>
 <script src="../../igniteui/js/modules/infragistics.ui.doughnutchart.js" type="text/javascript"></script>
 </head>
 <body>
 </body>
 </html>

  2. サンプル データを追加します。

    サンプル データを igDoughnutChart のシリーズのデータ ソースとして使用し、JavaScript 配列を定義します。

    HTML の場合:

     <head>...    
     <script>      
         var data = [
               { "ProductCategory": ' Footwear', "Index": 1498 },
                 { "ProductCategory": ' Clothing', "Index": 1389 },
                 { "ProductCategory": ' Books', "Index": 352 },
                 { "ProductCategory": ' Accessories', "Index": 273 },
                 { "ProductCategory": ' Equipment', "Index": 100 }
             ];
              ...
        </script>
  </head>

  3. igDoughnutChart 用のターゲット要素を作成します。

    igDoughnutChart ウィジェットのインスタンスを作成する HTML 本文内に DIV 要素を作成します。

    HTML の場合:

     <body>
     <!-- Target element for the igDoughnutChart -->
     <div id="doughnutChart"></div>
 </body>
 …

  4. document ready での igDoughnutChart のインスタンスを作成します。

    前に定義したターゲット要素のセレクターを使用して、ウィジェットのインスタンスを作成します。

    HTML の場合:

     <script type="text/jscript">
     $(function () {                        
               $("#doughnutChart").igDoughnutChart ({
         });
         });
 </script>

  5. 基本的な描画オプションを構成します。

    igDoughnutChart のインスタンスを作成するときに、width および height オプションを構成し、name、dataSource、valueMemberPath オプションを指定して、インスタンスにシリーズを追加します。

    HTML の場合:

     $(function () {
             var dc = $("#doughnutChart").igDoughnutChart({
               width: 300,
               height: 300,
               series: [
             {
                   name: "flatSeries",
                   valueMemberPath: "Index",
                   dataSource: data
               }
         ]
    });
 });

完全なコード

HTML の場合:

<!DOCTYPE html>
<html>
<head>
<title>DoughnutChart</title>
<!-- Ignite UI for jQuery IG Theme CSS File -->
    <link href="../../igniteui/css/themes/infragistics/infragistics.theme.css" rel="stylesheet" />
    <!-- Ignite UI for jQuery Required CSS File -->
    <link rel="stylesheet" type="text/css" href="../../igniteui/css/structure/modules/infragistics.ui.html5.css"/>
    <link rel="stylesheet" type="text/css" href="../../igniteui/css/structure/modules/infragistics.ui.shared.css"/>
    <link rel="stylesheet" type="text/css" href="../../igniteui/css/structure/modules/infragistics.ui.chart.css"/>
    <!-- jQuery Files -->
    <script src="../../js/jquery.min.js"></script>
    <script src="../../js/jquery-ui.min.js"></script>
    <!-- Ignite UI for jQuery Required JavaScript Files -->
    <script src="../../igniteui/js/modules/infragistics.util.js" type="text/javascript"></script>
    <script src="../../igniteui/js/modules/infragistics.util.jquery.js" type="text/javascript"></script>
    <script src="../../igniteui/js/modules/infragistics.ui.widget.js" type="text/javascript"></script>
    <script src="../../igniteui/js/modules/infragistics.datasource.js" type="text/javascript"></script>
    <script src="../../igniteui/js/modules/infragistics.templating.js" type="text/javascript"></script>
    <script src="../../igniteui/js/modules/infragistics.ext_core.js" type="text/javascript"></script>
    <script src="../../igniteui/js/modules/infragistics.ext_collections.js" type="text/javascript"></script>
    <script src="../../igniteui/js/modules/infragistics.ext_ui.js" type="text/javascript"></script>
    <script src="../../igniteui/js/modules/infragistics.dv_jquerydom.js" type="text/javascript"></script>
    <script src="../../igniteui/js/modules/infragistics.dv_core.js" type="text/javascript"></script>
    <script src="../../igniteui/js/modules/infragistics.legend.js" type="text/javascript"></script>
    <script src="../../igniteui/js/modules/infragistics.dv_geometry.js" type="text/javascript"></script>
    <script src="../../igniteui/js/modules/infragistics.datachart_core.js" type="text/javascript"></script>
    <script src="../../igniteui/js/modules/infragistics.dvcommonwidget.js" type="text/javascript"></script>
    <script src="../../igniteui/js/modules/infragistics.ui.chartlegend.js" type="text/javascript"></script>
    <script src="../../igniteui/js/modules/infragistics.ui.chart.js" type="text/javascript"></script>
    <script src="../../igniteui/js/modules/infragistics.piechart.js" type="text/javascript"></script>
    <script src="../../igniteui/js/modules/infragistics.doughnutchart.js" type="text/javascript"></script>
    <script src="../../igniteui/js/modules/infragistics.ui.basechart.js" type="text/javascript"></script>
    <script src="../../igniteui/js/modules/infragistics.ui.doughnutchart.js" type="text/javascript"></script>
    <script type="text/javascript">
            var data = [
            { "ProductCategory": ' Footwear', "Index": 1498 },
                { "ProductCategory": ' Clothing', "Index": 1389 },
                { "ProductCategory": ' Books', "Index": 352 },
                { "ProductCategory": ' Accessories', "Index": 273 },
                { "ProductCategory": ' Equipment', "Index": 100 }];
                  $(function () {
            var dc = $("#doughnutChart").igDoughnutChart({
                    width: 300,
                    height: 300,
                    series: [
                          {
                                    name: "flatSeries",
                                valueMemberPath: "Index",
                                    dataSource: data
                          }
                    ]
            });
        });
    </script>
</head>
<body>
<!-- Target element for the igDoughnutChart -->
<div id="doughnutChart"></div>
</body>
</html>

関連コンテンツ

トピック

このトピックの追加情報については、以下のトピックも合わせてご参照ください。

サンプル

以下のサンプルでは、このトピックに関連する情報を提供しています。

  • JSON へのバインド: このサンプルは、JSON データにバインドされたドーナツ型チャートを表示します。

オンラインで表示: GitHub