Web Components 構成オプション
マーカー、チャート タイトルとサブタイトル、およびチャート タイプなどの Ignite UI for Web Components カテゴリ チャート コンポネント機能をカスタマイズできます。
Web Components 構成オプションの例
チャート ビジュアルの構成
上記サンプルのようにチャート タイプにブラシを構成できます。以下のコード例はチャート タイプを waterfall に設定し、ブラシのデフォルト色を変更します。
<igc-category-chart
id="chart"
width="800px"
height="500px"
chart-type="waterfall"
brushes="blue, green"
negative-brushes="red, yellow"
outlines="black"
thickness="5" >
</igc-category-chart>
チャート マーカーの構成
マーカーは、カテゴリ チャート コンポーネントのプロット領域のデータ ポイント値を表示する視覚的要素です。値が主グリッド線と副グリッド線の間にある場合も指定したデータ ポイントの値をただちに識別できるようユーザーをサポートします。
チャート マーカーの外観は、カテゴリ チャートの MarkerType
、markerBrushes
、および markerOutlines
プロパティによって処理されます。以下のコード例では、このプロパティを使用しています。
<igc-category-chart
id="chart"
width="700px"
height="700px"
marker-type="diamondMarker"
marker-brushes="red"
marker-outlines="yellow">
</igc-category-chart>
チャートのタイトルとサブタイトルを構成
カテゴリ チャート コンポーネントのタイトルとサブタイトル機能は、チャートの上部セクションに情報を追加できます。 チャートにタイトルまたはサブタイトルを追加すると、タイトルとサブタイトルの情報に応じて、チャートの内容が自動的にサイズ変更されます。
以下のコード例のようにカテゴリ チャートのサブタイトルとタイトルにさまざまなフォントスタイル、マージン、配置を適用してルックアンドフィールをカスタマイズできます。
<igc-category-chart
id="chart"
width="800px"
height="500px"
chart-title="Energy Use Per Country"
title-text-color = "Red"
title-text-style="20pt Verdana"
subtitle="Results over a two year periods"
subtitle-text-color = "Blue"
subtitle-text-style = "10pt Verdana">
</igc-category-chart>
トランジションイン アニメーション
この機能は、新しいデータ ソースを読み込むときのシリーズのアニメーション化を可能にします。利用可能なアニメーションは、シリーズのタイプに基づきます。たとえば、列シリーズは x 軸が上に上昇するとアニメーションを再生します。折れ線シリーズは y 軸から描画するアニメーションを再生します。
チャートでタイトルおよびサブタイトル情報がサイズ変更できます。
デフォルトでアニメーションのトランジションは無効ですが、isTransitionInEnabled
オプションを true に設定してトランジションイン アニメーションを有効にできます。
アニメーションのトランジショントはトランジション タイプ、データ ポイントに相対するスピード、およびイージング関数によって管理されるイージング トランジションを構成できます。
トランジション タイプは、transitionInMode オプションを任意のトランジション名に設定して構成します。プロパティを Auto
(デフォルト値) に設定し、シリーズ タイプに基づいてトランジション タイプを自動的に選択することもできます。
以下のコード例では、トランジションイン アニメーションを有効にし、チャートを右側からアコーディオン表示する方法を示します。
<igc-category-chart
id="chart"
width="800px"
height="500px"
is-transition-in-enabled="true"
transition-in-duration="5000"
transition-in-mode="AccordionFromRight">
</igc-category-chart>