データラベルは、データポイントに関連付けられたラベルで、通常、データポイントの値を表示します。 データポイントを見るだけではその正確な値がわかりにくいチャートで、特に役立ちます。

FlexChart では、DataLabel クラス型の DataLabel プロパティを設定することで、データラベルを表示できます。DataLabel クラスの Content プロパティを設定して、データラベルに表示する内容を指定できます。

// チャートのデータラベル値を設定します
this.flexChart1.DataLabel.Content = "{y}";

' チャートのデータラベル値を設定します
Me.flexChart1.DataLabel.Content = "{y}"

カスタムデータラベルの作成

FlexChart では、テンプレート文字列を Content プロパティに割り当てることで、カスタムデータラベルを作成できます。次の定義済みパラメータを使用して、テンプレート文字列を作成できます。

FlexChart では、データラベルに表示される値を書式設定することもできます。たとえば、売上高や経費の数字について、必要な通貨、区切り文字、さらには小数点以下の桁数を使用して書式設定できます。また、長い形式や短い形式のさまざまな日付形式を使用して、時系列の値を表示することもできます。

// テンプレート文字列を設定して、データラベルのカスタムコンテンツを作成します
this.flexChart1.DataLabel.Content = "Country: {seriesName} \n Temp: {y}°F";          

' テンプレート文字列を設定して、データラベルのカスタムコンテンツを作成します
Me.flexChart1.DataLabel.Content = "Country: {seriesName} " & vbLf & " Temp: {y}属F"

データラベルの配置

FlexChart では、Position プロパティを使用して、データポイントに対してデータラベルを表示する位置を指定できます。 このプロパティは、C1.Chart.LabelPosition 列挙に含まれる値を受け取ります。これにより、データラベルをデータポイントの上、下、中央、左、または右に配置できます。

円グラフとサンバーストチャートの場合は、PieLabelPosition 列挙に含まれる値を受け取る PieDataLabel クラスの Position プロパティを使用してデータラベルを配置できます。このプロパティを使用すると、データラベルをチャートの内側、外側、または中央に配置できます。また、この同じプロパティを使用して、チャート内にデータラベルを円周方向または放射状に表示することもできます。

上記の 2 つのプロパティのデフォルト値は Auto です。これは、チャートの利用可能なスペースに応じてデータラベルを自動的に配置します。この値を None に設定して、データラベルを非表示にすることもできます。

// データラベルの位置を設定します
this.flexChart1.DataLabel.Position = LabelPosition.Top;

' データラベルの位置を設定します
Me.flexChart1.DataLabel.Position = LabelPosition.Top

データラベルのスタイル設定

FlexChart では、データラベルに関連するさまざまなプロパティがほかにも用意されており、それらを使用して、チャートの全体的な外観やわかりやすさを向上させることができます。たとえば、FlexChart では、データが混み合っているチャートで特定のデータポイントにどのデータラベルが属しているかを明確にするために、ConnectingLine プロパティを true に設定して接続線を表示できます。オフセットを設定して、データラベルをデータポイントからどの程度離して表示するかを定義することもできます。さらに、FlexChart では、Border プロパティを true に設定して、境界線付きのデータラベルを表示することができます。BorderStyle プロパティを使用すると境界線のスタイルも設定でき、データラベルをチャートの背景に対して目立たせることができます。データラベルの可視性を向上させるプロパティとして Angle プロパティがあり、これは、0 〜 90 度の値に設定できます。このプロパティは、データラベルの重なりを防ぐためにも役立ちます。データラベルの重なりを管理する方法については、「重なるデータラベルの管理」を参照してください。

// データラベルのオフセットを設定します
this.flexChart1.DataLabel.Offset = 10;

// データラベルとデータポイントを接続線で接続します
flexChart1.DataLabel.ConnectingLine = true;

// データラベルの境界線を設定します
flexChart1.DataLabel.Border = true;

// データラベルのスタイルを設定します
flexChart1.DataLabel.Style.Font = new Font(this.flexChart1.Font.FontFamily, 8, FontStyle.Italic);
flexChart1.DataLabel.BorderStyle.StrokeColor = Color.OrangeRed;
flexChart1.DataLabel.BorderStyle.FillColor = Color.AliceBlue;

// データラベルの角度を設定します
flexChart1.DataLabel.Angle = 45;

' データラベルのオフセットを設定します
Me.flexChart1.DataLabel.Offset = 10

' データラベルとデータポイントを接続線で接続します
flexChart1.DataLabel.ConnectingLine = True

' データラベルの境界線を設定します
flexChart1.DataLabel.Border = True

' データラベルのスタイルを設定します
flexChart1.DataLabel.Style.Font = New Font(Me.flexChart1.Font.FontFamily, 8, FontStyle.Italic)
flexChart1.DataLabel.BorderStyle.StrokeColor = Color.OrangeRed
flexChart1.DataLabel.BorderStyle.FillColor = Color.AliceBlue

' データラベルの角度を設定します
flexChart1.DataLabel.Angle = 45