バージョン

igCategoryChart のスタイル設定

トピックの概要

目的

このトピックは、igCategoryChart コントロールにスタイルおよびテーマを適用する方法を紹介します。

前提条件

概念

  • カスケード スタイル シート
  • リンクされた CCS ファイルの変更によるテーマの適用

トピック

外部リソース

このトピックの構成

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

概要

テーマの紹介

igCategoryChart は、スタイルおよびテーマを適用するために jQuery UI CSS Framework を使用します。特に指定しない限り、igCategoryChart は、デフォルトの jQuery UI テーマとして標準装備されている IG Theme を使用します。さらに、IG テーマにはその他のチャート固有のスタイルがいくつかあります。つまり、チャートの外観をカスタマイズするには、一般的な jQuery UI テーマでは十分ではありません。データ シリーズや軸などチャート固有の要素を変更するその他の style クラスを提供する必要があります。

テーマのカスタマイズには、ThemeRoller ツールを使用できます。この jQuery UI ツールにより jQuery UI ウィジェットと互換性のあるカスタム テーマを簡単に作成できるようになります。数々のビルド済みテーマをご自分の Web サイトにダウンロードして使用できます。igCategoryChart コントロールは ThemeRoller テーマの使用をサポートしています。

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

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

テーマの概要

igCategoryChart コントロールで使用できるテーマの概要です。

テーマ 説明
IG テーマ

パス: {IG CSS root}/themes/Infragistics/

ファイル: infragistics.theme.css

 このテーマは、すべての Ignite UI for jQuery コントロールの一般的なビジュアル機能を定義します。IG テーマの使用方法の詳細については、「Ignite UI for jQuery のスタイル設定とテーマ設定」トピックをご覧ください。
チャート構造

パス: {IG CSS root}/structure/modules/

ファイル: infragistics.ui.chart.css

 このテーマは、チャートに固有の視覚要素を定義します。

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

必要な CSS の概要

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

  • infragistics.theme.css – IG テーマが含まれています。
  • infragistics.ui.chart.css – チャート構造が含まれています。

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

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

必要な CSS コード: HTML

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 コード: ASPX

ASPX の場合:

<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" />

チャート スタイル参照

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

igCategoryChart のスタイルの目的と機能の概要です。

プロパティ 説明
.ui-chart-palette-1 to .ui-chart-palette-N データ シリーズ 1 の境界線と背景の色をデータ シリーズ N に設定します。アプリケーションで必要なだけ ui-chart-palette クラスを持つことができます。
.ui-chart-axis チャート軸の境界線と背景の色を設定します。
.ui-chart-legend-items-list チャートの凡例のすべてのスタイル設定オプションを設定します。
.ui-chart-legend-item-text 凡例項目のテキストのすべてのスタイル設定オプションを設定します。
.ui-chart-legend-item-badge 凡例項目のアイコンのすべてのスタイル設定オプションを設定します。
.ui-chart-tooltip チャートのツールチップのすべてのスタイル設定オプションを設定します。

注: すべての style クラスで、境界線の色設定は対応する要素のアウトラインを決定し、背景色の設定は要素の背景または塗りつぶしの色を決定します。

テーマを使用したチャート固有の視覚要素の変更

概要

infragistics.ui.chart.css チャート固有スタイルを変更することで igDataChart コントロールのさまざまな視覚要素のデフォルト設定を変更する方法を説明します。

この例ではチャートの作成手順を説明していないため、チャートのある既存のページをご覧ください。例では、チャート スタイルを変更する方法を示します。

この例では、データ シリーズの色を変更します。

前提条件

この手順を実行するには、以下が必要です。

  • 既存の igCategoryChart コントロールがある HTML5 Web ページ

概要

プロセスの高度な概要は以下の通りです。

  1. デフォルト チャート CSS ファイルをコピーする
  2. チャートの視覚要素のスタイルを変更する
  3. デフォルト チャート CSS ファイルから変更されたファイルへのリンクを変更する
  4. 結果を確認します。

手順

デフォルト IG Chart スタイルを好みの設定で変更する方法を紹介します。

  1. デフォルト チャート CSS ファイルをコピーする

    チャート スタイルがデフォルトの CSS ファイル (infragistics.ui.chart.css) を Ignite UI for jQuery インストール フォルダーから Web サイトまたはアプリケーションの themes フォルダーにコピーします。

    たとえば、アプリケーションで使用する CSS ファイルを保存している Web サイトまたはアプリケーションに Content/themes フォルダーがある場合、上記のデフォルト チャート CSS ファイルを Content/themes/MyChartTheme/ig.ui.chart.custom.css にコピーします。

  2. チャートの視覚要素のスタイルを変更します

    CSS ファイルのコピーを開き、スタイルを変更します。

    CSS の場合:

     .ui-chart-palette-1
 {
     border-color: rgb(35, 128, 168);
     border-color: rgba(35, 128, 168, .8);
     background-color: rgb(68, 172, 214);
     background-color: rgba(68, 172, 214, .8);
 }
 .ui-chart-palette-2
 {
     border-color: rgb(51, 51, 51);
     border-color: rgba(51, 51, 51, .8);
     background-color: rgb(73, 73, 73);
     background-color: rgba(73, 73, 73, .8);
 }
 .ui-chart-palette-3
 {
     border-color: rgb(128, 128, 128);
     border-color: rgba(128, 128, 128, .8);
     background-color: rgb(168, 168, 168);
     background-color: rgba(168, 168, 168, .8);
 }
 .ui-chart-palette-4
 {
     border-color: rgb(24, 81, 112);
     border-color: rgba(24, 81, 112, .8);
     background-color: rgb(33, 110, 153);
     background-color: rgba(33, 110, 153, .8);
 }
 .ui-chart-palette-5
 {
     border-color: rgb(135, 153, 34);
     border-color: rgba(135, 153, 34, .8);
     background-color: rgb(164, 186, 41);
     background-color: rgba(164, 186, 41, .8);
 }
 .ui-chart-axis
 {
     border-color: #989EA3;
     background-color: #989EA3;
 }
 .ui-chart-legend-items-list
 {
     padding: 10;
     margin: 5px;
 }
 .ui-chart-legend-item-text
 {
     vertical-align: text-bottom;
 }
 .ui-chart-legend-item-badge
 {
     vertical-align: baseline;   
 }
 .ui-chart-tooltip
 {
     -moz-box-shadow: 5px 5px rgba(0,0,0,0.5);
     -webkit-box-shadow: 5px 5px rgba(0,0,0,0.5);
     box-shadow: 5px 5px rgba(0,0,0,0.5);
 }

  3. デフォルト チャート CSS ファイルから変更されたファイルへのリンクを変更する

    デフォルト チャート CSS ファイルへのリンクを更新し、前のステップで変更された CSS ファイルをポイントします。

    HTML の場合:

     <link href="/Content/themes/MyChartTheme/ig.ui.chart.custom.css" rel="Stylesheet" type="text/css" />

    ASPX の場合:

     <link href='<%= Url.Content("~/Content/themes/MyChartTheme/ig.ui.chart.custom.css")%>' rel="stylesheet" type="text/css" />

  4. 結果を検証します。

    チャートの色とスタイルが変更されたことを確認するには、Web ページを保存し、ブラウザーで開きます。

関連コンテンツ

トピック

このトピックに関連する追加情報については、以下のトピックを参照してください。

リソース

以下のサード パーティ資料には、このトピックに関連する追加情報を記載しています。

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

オンラインで表示: GitHub