igCategoryChart コントロールのタイトルおよびサブタイトルの機能は、igChart コントロールの上セクションに情報を追加できます。
チャート コントロールにタイトルまたはサブタイトルを追加すると、タイトルとサブタイトルの情報に応じて、チャートの内容が自動的にサイズ変更されます。
このトピックは、以下のセクションで構成されます。
カテゴリ チャートは、チャートのタイトルとサブタイトルのフォント スタイル、マージン、配置などを変更してルックアンドフィールをカスタマイズできます。以下のプロパティを使用します。
プロパティ名 | プロパティ タイプ | 説明 |
---|---|---|
title |
string | タイトルに使用するテキストを決定します。 |
titleAlignment |
enumeration | タイトルの配置を決定します。 |
titleTextColor |
string | タイトルの色を決定します。 |
titleTextStyle |
string | タイトルに適用するフォント スタイルを決定します。 |
titleTopMargin |
number | タイトルの上に適用するマージンを決定します。 |
titleRightMargin |
number | タイトルの右に適用するマージンを決定します。 |
titleBottomMargin |
number | タイトルの下に適用するマージンを決定します。 |
titleLeftMargin |
number | タイトルの左に適用するマージンを決定します。 |
subtitle |
string | サブタイトルに使用するテキストを決定します。 |
subtitleTextColor |
string | サブタイトルの色を決定します。 |
subtitleTextStyle |
string | サブタイトルに適用するフォント スタイルを決定します。 |
subtitleAlignment |
enumeration | サブタイトルの配置を決定します。 |
subtitleTopMargin |
number | サブタイトルの上に適用するマージンを決定します。 |
subtitleRightMargin |
number | サブタイトルの右に適用するマージンを決定します。 |
subtitleBottomMargin |
number | サブタイトルの下に適用するマージンを決定します。 |
subtitleLeftMargin |
number | サブタイトルの左に適用するマージンを決定します。 |
以下のコード例は、タイトルとサブタイトルをカスタマイズします。
HTML の場合:
$(function () {
$("#chart").igCategoryChart({
dataSource: data,
chartType: "auto",
xAxisTitle: "Country",
yAxisTitle: "Millions of People",
yAxisTitleAngle: 90,
title: "Energy Use Per Country",
subtitle: "Results over a two year period",
titleTextColor: "blue",
titleTextStyle: "20pt Times New Roman|Georgia|Serif",
titleAlignment: "center",
});
});
オンラインで表示: GitHub