作成日: 2024/06/19 最終更新日: 2024/06/19
文書種別
使用方法
詳細
FlexChartのデータラベルにはデータ点の値が表示され、DataLabel.Positionプロパティを使用してデータ点のどの位置(上下左右)に表示するかを設定できます。
ただし、例えば棒グラフで、棒の高さの中央にラベル表示するといったことはできません。これを実現するため、SymbolRenderingイベントを利用し、指定した場所にテキスト注釈を表示する方法が考えられます。
以下に簡単な設定例を記載します。 ここでは、最初にシリーズのSymbolRenderingイベントにて、e.Pointプロパティで取得したデータ点の位置から描画すべき位置を算出します。次いで新規のテキスト注釈を作成し、これをアノテーションレイヤーに追加し、データ点の値を棒グラフの中央に表示します。

◎サンプルコード(VB)
ただし、例えば棒グラフで、棒の高さの中央にラベル表示するといったことはできません。これを実現するため、SymbolRenderingイベントを利用し、指定した場所にテキスト注釈を表示する方法が考えられます。
以下に簡単な設定例を記載します。 ここでは、最初にシリーズのSymbolRenderingイベントにて、e.Pointプロパティで取得したデータ点の位置から描画すべき位置を算出します。次いで新規のテキスト注釈を作成し、これをアノテーションレイヤーに追加し、データ点の値を棒グラフの中央に表示します。
◎サンプルコード(VB)
Imports C1.Chart
Imports C1.Win.Chart
Imports C1.Win.Chart.Annotation
Public Class Form1
Dim annotationLayer As AnnotationLayer
Private Sub Form1_Load(sender As Object, e As EventArgs) Handles MyBase.Load
' データの作成
Dim dt = New DataTable()
dt.Columns.AddRange({New DataColumn("Group"), New DataColumn("ID"), New DataColumn("Value", GetType(Integer))})
For i = 0 To 9
dt.Rows.Add($"{Microsoft.VisualBasic.ChrW(65 + i / 5)}", $"{i + 1:00}", i + 1)
Next
dt.AcceptChanges()
' シリーズの作成
Dim series1 = New Series() With {
.Name = "Series1",
.Binding = "Value",
.BindingX = "ID",
.ChartType = ChartType.Column
}
' チャートの設定
FlexChart1.Series.Clear()
FlexChart1.Series.Add(series1)
FlexChart1.DataSource = dt
' ラベルの描画
AddHandler series1.SymbolRendering, AddressOf series1_SymbolRendering
End Sub
Private Sub series1_SymbolRendering(sender As Object, e As RenderSymbolEventArgs)
' データ点の取得
Dim value = Convert.ToString(e.Series.GetValues(0)(e.Index))
Dim textRect = e.Graphics.MeasureString(value, Me.Font)
Dim height = CSng(FlexChart1.AxisY.Convert(0) - e.Point.Y) / 2 + e.Point.Y - textRect.Height / 2
Dim pos = New PointF(e.Point.X - textRect.Width / 2, height)
' テキスト注釈を表示
Dim text As C1.Win.Chart.Annotation.Text = New C1.Win.Chart.Annotation.Text()
text.Content = String.Format("{0}", value)
text.Attachment = C1.Chart.Annotation.AnnotationAttachment.Absolute 'ピクセル座標での指定
text.Location = pos '場所
text.Position = C1.Chart.Annotation.AnnotationPosition.Center '位置
text.Style.StrokeColor = Color.DarkBlue '文字色
text.Style.Font = New Drawing.Font("メイリオ", 9, FontStyle.Regular) 'フォント
' アノテーションレイヤーに追加
annotationLayer = New AnnotationLayer(FlexChart1)
annotationLayer.Annotations.Add(text)
End Sub
End Class
◎サンプルコード(C#)
using C1.Chart.Annotation;
using C1.Win.Chart.Annotation;
namespace prj_FlexChart
{
public partial class Form1 : Form
{
AnnotationLayer annotationLayer;
public Form1()
{
InitializeComponent();
}
private void Form1_Load(object sender, EventArgs e)
{
// データの作成
var dt = new DataTable();
dt.Columns.AddRange(new[]
{
new DataColumn("Group"),
new DataColumn("ID"),
new DataColumn("Value",typeof(Int32))
});
for(var i = 0; i < 10; i++)
{
dt.Rows.Add($"{(char)(65 + i / 5)}", $"{i + 1:00}", i + 1);
}
dt.AcceptChanges();
// シリーズの作成
var series1 = new Series()
{
Name = "Series1",
Binding = "Value",
BindingX = "ID",
ChartType = ChartType.Column
};
// チャートの設定
flexChart1.Series.Clear();
flexChart1.Series.Add(series1);
flexChart1.DataSource = dt;
// 注釈の描画
series1.SymbolRendering += series1_SymbolRendering;
}
private void series1_SymbolRendering(object sender, RenderSymbolEventArgs e)
{
// データ点の取得
var value = Convert.ToString(e.Series.GetValues(0)[e.Index]);
var textRect = e.Graphics.MeasureString(value, this.Font);
var height = (float)(flexChart1.AxisY.Convert(0) - e.Point.Y) / 2 + e.Point.Y - textRect.Height / 2;
var pos = new PointF(e.Point.X - textRect.Width / 2, height);
// テキスト注釈を表示
C1.Win.Chart.Annotation.Text text = new C1.Win.Chart.Annotation.Text();
text.Content = String.Format("{0}", value);
text.Attachment = C1.Chart.Annotation.AnnotationAttachment.Absolute; //ピクセル座標での指定
text.Location = pos; //場所
text.Position = AnnotationPosition.Center; //位置
text.Style.StrokeColor = Color.DarkBlue; //文字色
text.Style.Font = new System.Drawing.Font("メイリオ", 9, FontStyle.Regular); //フォント
// アノテーションレイヤーに追加
annotationLayer = new AnnotationLayer(flexChart1);
annotationLayer.Annotations.Add(text);
}
}
}