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>

Web Components 構成オプション