バージョン 21.2

igFunnelChart のスタイル設定

トピックの概要

目的

このトピックでは、igFunnelChart™ コントロールのルックアンドフィールをカスタマイズする方法を説明します。

前提条件

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

  • 概念
    • カスケード スタイル シート
    • リンクされた CCS ファイルの変更によるテーマの適用
  • トピック
    • Ignite UI for jQuery のスタイル設定とテーマ設定: このトピックは、Ignite UI for jQuery® ライブラリのスタイルとテーマの更新に関する一般情報とその手順を説明します。
    • igFunnelChart の概要: このトピックでは、主要機能、最小要件、ユーザー機能性など、igFunnelChart コントロールに関する概念的な情報を提供します。
    • igFunnelChart の追加: このトピックでは、igFunnelChart コントロールを HTML ページに追加しデータへバインドする方法を説明します。

このトピックの内容

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

概要

igFunnelChart コントロールにより、開発者は Web サイトのアプリケーションでファンネル チャートを簡単に作成できます。igFunnelChart コントロールは、スタイルおよびテーマを適用するために jQuery UI CSS Framework を使用します。デフォルトでは、igFunnelChart は、アプリケーションで使用するため Infragistics® により提供される jQuery UI テーマである IG テーマを使用します。それに加えて、IG テーマにはファンネル チャートをサポートする固有のスタイルがいくつかあります。これは、ファンネル チャートのルック アンド フィールをカスタマイズするには、汎用の jQuery UI テーマでは十分でないために必要となります。ツールチップやスライスなどファンネル チャートに固有の要素を変更するために追加のスタイル クラスを提供します。

Ignite UI for jQuery ライブラリでテーマを使用する方法の詳細については、「Ignite UI for jQuery のスタイル設定とテーマ設定」トピックをご覧ください。

注: Ignite UI for jQuery のベース テーマはチャートには不要で、チャートのみ表示されたページでは省略できます。

テーマの概要

Ignite UI for jQuery は、igFunnelChart コントロールを使用して以下のテーマを提供します。

  • IG
  • Metro

詳細な説明については、以下の概要表を参照してください。

テーマの概要表

次の表は、igFunnelChart で使用できるテーマをまとめたものです。

テーマ 説明
IG パス: IG CSS ルート/themes/infragistics/
ファイル: infragistics.theme.css
このテーマは、すべての Ignite UI for jQuery コントロールの一般的なビジュアル機能を定義します。IG テーマの使用方法の詳細については、「Ignite UI for jQuery のスタイル設定とテーマ設定」トピックをご覧ください。
Metro パス: IG CSS ルート/themes/metro/
ファイル: infragistics.theme.css
このテーマは、新しい Windows® 8 ユーザー インターフェイスとタッチ対応デバイスに関するビジュアル機能を定義します。スライスの角ばったコーナーと多少異なるカラーが特長です。

必要なカスケード スタイル シート (CSS)

ファンネル チャートを正しく描画するためには以下の CSSリソースが必要です。

  • infragistics.theme.css - IG テーマが含まれています。

  • infragistics.ui.chart.css - チャート構造が含まれています。

以下のコード スニペットでは、CSS リソースが Web サイトまたはアプリケーション ルート下の Content/ig フォルダーに置かれていることを前提としています。

注: 以下のブロックは、手動で必要な CSS ファイルを組み込む場合の情報を提供しています。ただし、Infragistics Loader コントロールを使用してこれらのファイルをページに読み込むことをお勧めします。

必要な CSS リソース コード: HTML

HTML の場合:

Required CSS resources code: HTML
<link href="Content/ig/themes/Infragistics/infragistics.theme.css" rel="Stylesheet" />
<link href="Content/ig/structure/modules/infragistics.ui.chart.css" rel="Stylesheet" />

必要な CSS リソース コード: MVC

ASPX の場合:

Required CSS resources code: MVC
<link href='@Url.Content("~/Content/ig/themes/Infragistics/infragistics.theme.css")'
      rel="stylesheet" type="text/css" />
<link href='@Url.Content("~/Content/ig/structure/modules/infragistics.ui.chart.css")'
      rel="stylesheet" type="text/css" />

ファンネル チャート スタイルの参照

以下の表は、igFunnelChart コントロールで使用するスタイル クラスの目的と機能を説明します。

プロパティ 説明
.ui-chart-palette-1 ~ .ui-chart-palette-N スライス 1 ~ N の境界線と背景の色を設定します。アプリケーションで必要なだけ ui-chart-palette クラスを持つことができます。
.ui-funnel フォント、フォント サイズなどでファンネル チャート全体に対して基本設定を設定します。
.ui-funnel-tooltip チャートのツールチップのすべてのスタイル設定オプションを設定します。
.ui-funnel-slice スライスのスタイル設定オプションを設定します。選択されているスライスが無い場合、または useUnselectedStyle オプションが false に設定されている場合に使用されます。
.ui-funnel-slice-selected 選択されたスライスに対してスタイル設定オプションを設定します。
.ui-funnel-slice-unselected その他に選択されたスライスがある場合に使用される選択スライスのスタイル設定オプションを設定します。useUnselectedStyle オプションは true に設定します。

igFunnelChart スタイル設定オプション

スタイル リファレンスの概要

igFunnelChart コントロールはビジュアル コンテンツ用で、チャートのレイアウトおよび色を変更するための多数のプロパティおよびスタイル設定オプションがあります。CSS を使用して以下を定義します。

  • スライスの色
  • ツールチップのフォーマット用の色、網掛け、フォント、その他の CSS プロパティ

個々のファンネル チャート コントロール オプションで、以下を定義できます。

  • スライスの色とアウトライン
  • スライス ラベル テキストのスタイル。

以下の参照テーブルは、チャート要素の色とその目的を変更するすべてのオプションをカタログ化しています。設定されたファンネル チャート オプションは CSS ファイルで定義された style クラスより優先されます。これらのオプションは、チャートの描画を実行時にプログラム的に変更します。

スタイル参照の概要表

以下の表は、igFunnelChart コントロールのスタイル設定プロパティの目的と機能についてまとめています。

プロパティ 説明
brushes 自動的に割り当てられたスライスの色を選択するパレットを定義します。
outlines 自動的に割り当てられたスライス アウトラインの色のパレットを定義します。
outlineThickness スライスのアウトラインの太さを定義します。

コード例の概要

以下の表は、このトピックで使用したコード例をまとめたものです。

例 説明
インナー ラベルとアウター ラベルのテンプレートを構成する このコード例は、ファンネル チャートにおいてインナー ラベルとアウター ラベル用のテンプレートを構成する方法を示します。
CSS でスタイル カラーを構成する このコード例は、スライスのルック アンド フィールを制御する CSS リソースをオーバーライドすることによりスライスの色をカスタマイズする方法を示します。
コントロール オプションでスタイル カラーを構成する このコード例は、スライスのルック アンド フィールを制御するファンネル チャート オプションを変更することによりスライスの色をカスタマイズする方法を示します。

コード例: インナー ラベルとアウター ラベルのテンプレートを構成する

説明

このコード例は、チャート上の各スライスについてコールバック関数を定義および呼び出すことによりインナー ラベルとアウター ラベルのファンネル チャート テンプレートを構成する方法を示します。コールバック関数は、適切なラベルを作成する場合に重大な柔軟性を有効化する引数を渡します。関数は、チャート上で描画される文字列を返さなければなりません。

コード

以下のコード スニペットは、ファンネル チャートにおいてインナー ラベルとアウター ラベル用のコールバック関数を構成する方法を示します。この関数は、入力引数で文字列操作を実行し、チャート上に表示される文字列を対応するスライスのラベルとして返します。

JavaScript の場合:

$("#funnelChart").igFunnelChart({
    . . .
    formatInnerLabel: function (value, sliceNo, chart) {
        return "$" + value + " million";
    },
    formatOuterLabel: function (value, sliceNo, chart) {
        return "Division: " + value;
    }
});

コールバック関数の引数参照

引数 説明
value チャートに渡されるデータ ソースから現在のスライスにバインドされる値を含みます。
sliceNo チャートにバインドされるデータ ソース内にスライスのインデックスを含みます。
chart チャート ウィジェットへの参照を含みます。

コード例: CSS でスタイル カラーを構成する

説明

このコード例は、スライスのルック アンド フィールを支配する CSS スタイルをオーバーライドすることによりスライスの色をカスタマイズする方法を示します。

コード

以下のコード スニペットは、複数の igFunnelChart スタイルをオーバーライドします。最初の 6 つのスライスに対し背景とアウトライン カラーを再定義し、選択済みと unselected スライスのスタイルの両方を設定します。

HTML の場合:

<style type="text/css">
    /* Redefine the styles from infragistics.theme.css that define fill and border colors for slices */
    .ui-chart-palette-1 { border-color: #00AADE; background-color: #00AADE }
    .ui-chart-palette-2 { border-color: #4B4B4D; background-color: #4B4B4D }
    .ui-chart-palette-3 { border-color: #FCB025; background-color: #FCB025 }
    .ui-chart-palette-4 { border-color: #EC6C2B; background-color: #EC6C2B }
    .ui-chart-palette-5 { border-color: #36C0F3; background-color: #36C0F3 }
    .ui-chart-palette-6 { border-color: #5B17A8; background-color: #5B17A8 }
    /* Redefine slice selected and unselected styles */
    .ui-funnel-slice-selected { opacity: 1; }
    .ui-funnel-slice-unselected { opacity: 0.4; border: 1px solid black; }
</style>

コード例: コントロール オプションでスタイル カラーを構成する

説明

このコード例は、スライスのルック アンド フィールを制御するファンネル チャート オプションを変更することによりスライスの色をカスタマイズする方法を示します。brushes、outlines および outlineThickness のオプションを構成する場合、この構成は対応する視覚要素の CSS に優先します。

コード

以下のコード例は、スライスの背景とアウトラインのカスタム カラーを構成する方法を示します。サンプルが示すのは、その他のすべての igFunnelChart 構成を省略する brushes、outlines および outlineThickness 用の基本コードのみです。

JavaScript の場合:

$("#funnelChart").igFunnelChart({
    . . .
    brushes: ["#7DC3D9", "#3e5354", "#9EB5B4", "#5DD1C6", "#AFD1CE", "#2B768E"],
    outlines: [ "#3189A6", "#212D2E", "#5C7877", "#2FA498", "#487D78", "#163F4B" ],
    outlineThickness: 3
});

関連コンテンツ

トピック

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

  • igFunnelChart のデータへのバインディング: このトピックでは、igFunnelChart コントロールを各種データ ソースへバインドする方法を説明します。

  • igFunnelChart の構成: このトピックは、igFunnelChart コントロールの異なる可視機能とビヘイビアーの構成方法を説明します。

  • igFunnelChart のスタイル設定: このトピックでは、igFunnelChart コントロールのルックアンドフィールをカスタマイズする方法を説明します。

  • アクセシビリティ準拠 (igFunnelChart): このトピックでは、igFunnelChart コントロールのユーザー補助機能について説明し、チャートを含むページのアクセシビリティの遵守を実現する方法に関してアドバイスを提供します。

  • 既知の問題と制限 (igFunnelChart): このトピックでは、igFunnelChart コントロールに関連する既知の問題点に関する情報を提供します。

  • jQuery と MVC API リンク (igFunnelChart): このトピックでは、igFunnelChart コントロールと ASP.NET MVC ヘルパーのための API リファレンスのドキュメントへのリンクの一覧を示します。

サンプル

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

  • スライスの選択: このサンプルは、スライス選択機能の有効化および sliceClicked イベントの処理を示します。

リソース

以下の資料 (Infragistics のコンテンツ ファミリー以外でもご利用いただけます) は、このトピックに関連する追加情報を提供します。

  • jQuery Themeroller: プレビューとダウンロードのため jQuery UI テーマを提供します。

オンラインで表示: GitHub