バージョン

チャートのタイトルとサブタイトル

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