データのビジュアル化でのグラデーション カラーの使用

トピックの概要

目的

このトピックは、Ignite UI for jQuery™ コントロールのビジュアル データにグラデーション カラーを適用する方法を説明します。この機能は、以下のデータ ビジュアライゼーション コントロールでサポートされています。

• igBulletGraph™
• igDataChart™
• igLinearGauge™

前提条件

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

概念

• カラー グラデーション
• CSS background-image プロパティ

トピック

Ignite UI for jQuery のスタイル設定とテーマ設定: このトピックでは、デザイン段階でのアプリケーションのセットアップ手順について説明し、実稼働環境で CSS を使用するためのオプションを紹介すると同時に、テーマの作成またはカスタマイズについての概要を示します。

igDataChart の追加: このトピックでは、igDataChart コントロールをページに追加し、データにバインドする方法を紹介します。

外部リソース

カラー グラデーション: カラー グラデーションの概念が説明された Wikipedia の記事

CSS 線状グラデーション: linear-gradient() CSS 機能が説明された記事。

このトピックの内容

• 概要
  • グラデーション カラー構成の概要
  • サポートされるグラデーションのタイプ
  • グラデーション カラー構成の概要表
• 線状カラー グラデーションの構成
• API によるグラデーション カラーの構成
  • 概要
  • プロパティ設定
  • 例
• CSS クラスによるグラデーション カラーの構成
  • 概要
  • 例
• CSS クラス リファレンス
  • 概要
  • igBulletGraph
  • igDataChart
  • igLinearGauge
• 関連コンテンツ
  • トピック
  • サンプル

概要

グラデーション カラー構成の概要

線状カラー グラデーションは、データ ビジュアライゼーション コントロールでビジュアル オブジェクトの塗りつぶしとアウトラインに適用できます。

グラデーション カラーは、サポートされているコンポーネントの色関連プロパティにより構成されます。これには、線状などのグラデーションのタイプおよび色境界の指定が含まれます。他の構成プロパティは、それぞれの効果タイプに特有です。

サポートされるグラデーションのタイプ

現在、線状グラデーションのみがサポートされています。

グラデーション カラー構成の概要表

以下の表で、データ ビジュアライゼーションでグラデーション カラーを構成できる方法を簡単に説明します。

線状カラー グラデーションの構成

線状グラデーション カラー構成の概要

線状カラー グラデーション効果で構成できる主な要素は、タイプ、方向、およびカラー フローです。

グラデーション方向の構成

デフォルトのグラデーション方向は上から下に設定されています。カスタムで方向が指定されていない場合、オフセット 0 の色は図の一番上に配置され、オフセット 1 の色は一番下に配置されます。グラデーション方向を変更するには、開始点と終了点を指定します。開始点と終了点は、グラデーションを開始し終了する地点です。その地点の x 座標および y 座標はともに 0～1 の範囲内であることが必要です。(0, 0) は図の境界線四角形の左上の端で (1, 1) は図の境界線四角形の右下の端です。

グラデーション カラー フローの構成

グラデーション タイプの他に、2 つ以上のグラデーション境界を構成します。各グラデーション境界は、グラデーションの開始点からの色とオフセットを指定し、グラデーションのカラー フローを表す仮想のグラデーション線に沿って色が配置される場所を示す必要があります。グラデーション線のデフォルトは、垂直の下方向です。すなわち、開始点の座標は (0,0) で終了点の座標は (0,1) です。グラデーション カラーのカスタム スプレッドを実現するために、2 つ以上のグラデーション境界が使用できます。

以下の画像は、前述で説明するようにカスタム設定された角度の線状カラー グラデーションで、igDataChart 領域シリーズの図形を塗りつぶす状態を示しています。

グラデーション カラーは、API、または一部のコントロールでは CSS クラスで構成できます。

注: 色が API と CSS クラスの両方で指定された場合は、API 設定が優先され、各 CSS クラスは無効になります。

API によるグラデーション カラーの構成

概要

API によるグラデーション カラーは、グラデーションを指定する JavaScript オブジェクトを、グラデーションをサポートするブラシや色関連のプロパティの 1 つに設定して構成されます。

プロパティ設定

以下の表では、グラデーション カラーに関する視覚要素を構成できる項目を示し、管理に使用するプロパティにマップします。

例

以下のスクリーンショットは、シリーズに以下のグラデーション カラーを適用した結果、igDataChart コントロールの任意のエリア シリーズ領域の外観がどのようになるか示しています。

以下のコードはこの例を実装します。

JavaScript の場合:

…
brush: {
    type: "linearGradient",
    colorStops: [{
        color: "#FFD800", //orange
        offset: 0
    },
    {
        color: "#FF00DC", //pink
        offset: 1
    }],
    startPoint: { x: 0, y: .2 },
    endPoint: { x: 1, y: .8 }
}

CSS クラスによるグラデーション カラーの構成

概要

一部の Ignite UI for jQuery データ ビジュアライゼーション コントロールは、その色関連のプロパティの一部に対して CSS によるグラデーション カラーの設定をサポートしています。CSS でグラデーション カラーを指定するには、特定クラスを対象として、視覚要素の background-image プロパティをグラデーション (linear-gradient など) を指定する機能に設定する CSS ルールを作成する必要があります。CSS グラデーション カラーと CSS の単色設定が同時に指定された場合は、グラデーション カラーが優先されます。

注: 色が API と CSS クラスの両方で指定された場合は、API 設定が優先され、各 CSS クラスは無効になります。

例

以下のスクリーンショットは、最初のシリーズが CSS の以下の設定で構成された igDataChart コントロールを示しています。

以下のコードはこの例を実装します。

CSS の場合:

.ui-chart-fill-palette-1 {
    background-image: linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet);
}

CSS クラス リファレンス

概要

以下の表は、データ ビジュアライゼーションでグラデーション カラーの構成に使用する CSS クラスの参照情報を提供します。各クラスはコントロールに固有なクラスです。アルファベット順にリストされています。

igBulletGraph

igDataChart

igLinearGauge

関連コンテンツ

トピック

以下のトピックでは、このトピックに関連する追加情報を提供します。

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

サンプル

このトピックについては、以下のサンプルも参照してください。

• チャート塗りつぶしのグラデーション: このサンプルは、igDataChart コントロールで線状グラデーション カラーを使用する方法を紹介します。