チャート シリーズのスタイル設定 (igDataChart)

トピックの概要

目的

このトピックは、igDataChart™ コントロールのシリーズのスタイル設定方法の概要について紹介し、例として影付きの効果をシリーズに適用する方法を紹介します。

前提条件

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

• igDataChart の追加

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

このトピックの内容

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

• 概要
• 線状グラデーション色を適用したチャート シリーズのスタイル設定
• 影付きの効果を適用したチャート シリーズのスタイル設定
  • 影付き効果の構成の概要
  • 影のタイプ
  • 影付き効果の構成の概要表
  • プロパティ設定
  • 例 - モノリス シャドウによる影付き効果
  • 例 - コンパウンド シャドウによる影付き効果
• 関連コンテンツ
  • トピック

概要

チャート シリーズのスタイル設定の概要

igDataChart のシリーズは、複数の要素でスタイル設定できますが、異なるフィールとアウトライン ブラシをシリーズに適用することが重要な点です。これはシリーズの brush と outline プロパティで処理されます。シリーズのルック アンド フィールのその他の要素、たとえばアウトラインの太さやシリーズの不透明度なども、シリーズの thickness および areaFillOpacity のプロパティで構成できます。

上記で説明するスタイル設定の制御に加え、isDropShadowEnabled プロパティでも影付き効果をチャート シリーズに適用できます。

線状グラデーション色を適用したチャート シリーズのスタイル設定

brush または outline の型を "linearGradient" に設定し、色およびオフセットを持つ 2 つ以上の colorStops の配列を提供すると、線状グラデーションが適用されます。

以下のサンプルは、線状グラデーションを設定するチャート構成を定義します。

影付きの効果を適用したチャート シリーズのスタイル設定

影付き効果の構成の概要

影付き効果により、シリーズはあたかも3Dのように見えます。

ドロップ シャドウ

シリーズの isDropShadowEnabled プロパティを "true" に設定すると、シリーズに影付き効果が適用されます。構成可能な影のタイプの場合、効果のカスタマイズとして、ぼかしの半径、色、方向、および不透明度がseries の影に関連するプロパティでサポートされています (詳細は影付き効果の構成の概要表、プロパティの設定およびコード例を参照してください)。

影のタイプ

2 種類の影が影付き効果で使用できます。シリーズの影が、塗りつぶし図形やアウトライン図形の個別の影、または単独のモノリス シャドウかにより使用するタイプが決定されます。

• モノリス シャドウ - シリーズで表示される影は 1 種類のみ。
• コンパウンド シャドウ - シリーズの塗りつぶし部分およびアウトライン部分で個別の影。

影のタイプのデフォルトはモノリスです。コンパウンド タイプを使用するメリットは、影付き効果の表示を微調整できる点です。

注: 現在、コンパウンド シャドウにのみ blur が適用できます。制限についての詳細は、注意事項を参照してください。

影のタイプは、useSingleShadow プロパティで制御されます。このプロパティを "true" (既定) に設定するとモノリス シャドウが適用され、"false" に設定するとコンパウンド シャドウが適用されます。

影付き効果の構成の概要表

以下の表で、チャートの影付き効果で構成できる要素を簡単に説明し、構成に使用するプロパティにマップします。既定の影付き効果のスタイル設定は、シリーズのタイプによって異なります。表の後に、影のタイプの設定について、詳細や例が記載されています。

プロパティ設定

以下の表は、影付き効果の各プロパティ設定で構成できる項目を示しています。

例 - モノリス シャドウによる影付き効果

この例は、モノリスの影付きを適用しスタイル設定する方法を示します。useSingleShadow プロパティは デフォルトで"true" に設定されているため、明示的なコード設定は必要ありません。

以下のスクリーンショットは、以下の影の設定の結果、igDataChart コントロールの折れ線シリーズの外観がどのようになるか示しています。

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

JavaScript の場合:

series: [
    {
        type: "column",
        isDropShadowEnabled: true,
        shadowBlur: 20,
        shadowColor: "darkBlue",
        shadowOffsetX: 10,
        shadowOffsetY: -15
    }

例 - コンパウンド シャドウによる影付き効果

この例は、コンパウンドの影付きにぼかしを適用する方法を示します。

以下のスクリーンショットは、以下の影の設定の結果、igDataChart コントロールの柱状シリーズの外観がどのようになるか示しています。

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

JavaScript の場合:

series: [
    {
        type: "column",
        isDropShadowEnabled: true,
        useSingleShadow: false,
        shadowBlur: 20,
        shadowColor: "darkBlue",
        shadowOffsetX: 10,
        shadowOffsetY: -15,
      }

関連コンテンツ

トピック

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

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

• Ignite UI for jQuery のスタイル設定とテーマ設定: Ignite UI for jQuery™ ライブラリのスタイルとテーマの更新に関する概要とその手順を説明します。