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

◎サンプルコード(VB)
ただし、例えば棒グラフで、棒の高さの中央にラベル表示するといったことはできません。これを実現するため、SymbolRenderingイベントを利用して独自に文字列を描画する方法が考えられます。
以下に簡単な設定例を記載します。ここでは、シリーズのSymbolRenderingイベントにて、e.Pointプロパティで取得したデータ点の位置から描画すべき位置を算出し、e.Graphics.DrawStringメソッドを使用してデータ点の値をテキストとして棒グラフの中央に描画します。
◎サンプルコード(VB)
Imports C1.Chart
Imports C1.Win.Chart
Public Class Form1
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)
e.Graphics.DrawString(value, Me.Font, Brushes.Black, pos)
End Sub
End Class
◎サンプルコード(C#)
using C1.Chart;
using C1.Win.Chart;
namespace prj_FlexChart
{
public partial class Form1 : Form
{
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);
e.Graphics.DrawString(value, this.Font, Brushes.Black, pos);
}
}
}