このトピックでは、igDataChart™ コントロールのチャート タイトルとサブタイトル機能を使用する方法を説明します。
このトピックを理解するためには、以下のトピックを理解しておく必要があります:
igDataChart™ コントロールをページに追加し、データにバインドする方法を紹介します。このトピックは、以下のセクションで構成されます。
igDataChart コントロールのタイトルとサブタイトル機能は、チャート コントロールの一番上のセクションに情報を追加できます。以下のスクリーンショットは、デフォルト設定で追加されるタイトルとサブタイトルを示しています。
チャート コントロールにタイトルまたはサブタイトル、または両方を追加すると、タイトルとサブタイトルの情報に応じて、チャートの内容が自動的にサイズ変更されます。
タイトルとサブタイトルは、igDataChart コントロールの対応するオプションのプロパティ（title と subtitle）に、タイトルまたはサブタイトルに表示する文字列を設定すると追加されます。
igDataChart コントロールのタイトルとサブタイトルは非常に柔軟に構成できます。タイトルとサブタイトルのフォント、フォント サイズ、色、配置をスタイル設定できます。
以下の表は、任意の構成とそれを管理するプロパティ設定のマッピングを示します。
| 目的: | 使用するプロパティ: | 設定の選択肢: |
|---|---|---|
| サブタイトルの下の余白の設定 | subtitleBottomMargin | Integer |
| サブタイトルの水平方向の配置 | subtitleHorizontalAlignment | string |
| サブタイトルの左の余白の設定 | subtitleLeftMargin | Integer |
| サブタイトルの右の余白の設定 | subtitleRightMargin | Integer |
| サブタイトルのテキスト色の設定 | subtitleTextColor | string |
| サブタイトルのフォント スタイルとテキスト サイズの設定 | subtitleTextStyle | string |
| サブタイトルの左の余白の設定 | subtitleTopMargin | Integer |
| タイトルの下の余白の設定 | titleBottomMargin | Integer |
| タイトルのの水平方向の配置 | titleHorizontalAlignment | string |
| タイトルの左の余白の設定 | titleLeftMargin | Integer |
| タイトルの右の余白の設定 | titleRightMargin | Integer |
| タイトルのテキスト色の設定 | titleTextColor | string |
| タイトルのフォント スタイルとテキスト サイズの設定 | titleTextStyle | string |
| タイトルの左の余白の設定 | titleTopMargin | Integer |
以下は、チャート タイトルの設定表およびこの構成を実装する実例です。
| プロパティ | 値 |
|---|---|
| title | "国別エネルギー生産量" |
| titleTextColor | "#2e9ca6" |
| titleTextStyle | "20pt Arial" |
| subtitle | "総一次エネルギー生産国トップ 5" |
| subtitleTextColor | "#2e9ca6" |
| subtitleTextStyle | "14pt Arial" |
以下のトピックでは、このトピックに関連する追加情報を提供しています。
igDataChart コントロールをページに追加し、データにバインドする方法を紹介します。オンラインで表示: GitHub