作成日: 2023/02/09 最終更新日: 2023/02/09
文書種別
使用方法
詳細
FlexChartの横棒グラフ(ChartType.Bar)を使用し、X軸に時間を表示し、1行に複数のタスクを示したガントチャートを作成する方法を紹介します。
最初に、タスクを表す「Taskクラス」を作成し、タスクのIDEx/NameEx/StartEx/EndEx/ColorExプロパティ(それぞれID番号、タスク名、開始時間、終了時間、バーの色に対応)を定義します。
次いで、同じID値を持つ複数のデータを設定し、Series_SymbolRenderingイベントで、独自に横棒(バー)を描画することで、1行に複数のタスクを表示したガントチャートを生成します。
このとき、StartEx/EndExのデータとしてDateTime型を指定して時刻を設定し、ToOADateメソッドを使用してOLE オートメーション日付(浮動小数点数)に変換してから、この座標を基に独自の矩形を描画します。

◎サンプルコード(VB)
最初に、タスクを表す「Taskクラス」を作成し、タスクのIDEx/NameEx/StartEx/EndEx/ColorExプロパティ(それぞれID番号、タスク名、開始時間、終了時間、バーの色に対応)を定義します。
次いで、同じID値を持つ複数のデータを設定し、Series_SymbolRenderingイベントで、独自に横棒(バー)を描画することで、1行に複数のタスクを表示したガントチャートを生成します。
このとき、StartEx/EndExのデータとしてDateTime型を指定して時刻を設定し、ToOADateメソッドを使用してOLE オートメーション日付(浮動小数点数)に変換してから、この座標を基に独自の矩形を描画します。
◎サンプルコード(VB)
Imports C1.Chart
Imports C1.Win.Chart
Public Class Form1
'Dim testTask1 As List(Of Task)
Shared _taskData As List(Of Task)
Shared _colors As Color() = New Color() {
Color.FromArgb(171, 208, 237),
Color.FromArgb(252, 201, 137),
Color.FromArgb(177, 220, 182),
Color.FromArgb(248, 195, 217),
Color.FromArgb(210, 192, 135),
Color.FromArgb(200, 190, 235),
Color.FromArgb(245, 245, 100),
Color.FromArgb(255, 155, 155),
Color.FromArgb(187, 187, 187)
}
Private Sub Form1_Load(sender As Object, e As EventArgs) Handles MyBase.Load
' データバインドの設定
FlexChart1.ChartType = ChartType.Bar
_taskData = GetTasksData()
FlexChart1.DataSource = _taskData
FlexChart1.BindingX = "IDEx"
FlexChart1.Header.Content = "タスク管理"
FlexChart1.Legend.Position = Position.None
FlexChart1.ToolTip.Active = False
' シリーズの追加
Dim series As Series = New GanttSeriesWithPointLegendItems()
series.Binding = "EndEx"
AddHandler series.SymbolRendering, AddressOf Series_SymbolRendering
FlexChart1.Series.Add(series)
' データラベルの追加
AddHandler FlexChart1.LabelRendering, AddressOf LabelRendering
FlexChart1.DataLabel.Position = LabelPosition.Left
FlexChart1.DataLabel.Content = "Value"
' 軸の設定
FlexChart1.AxisX.Min = _taskData(0).StartEx.ToOADate()
FlexChart1.AxisX.Max = _taskData(_taskData.Count - 1).EndEx.ToOADate()
FlexChart1.AxisX.MajorGrid = True
FlexChart1.AxisY.Min = 0
FlexChart1.AxisY.Max = 3
End Sub
' シリーズの設定
Public Class GanttSeriesWithPointLegendItems
Inherits Series
Implements ISeries
Private Function GetLegendItemName(ByVal index As Integer) As String
Return _taskData.ElementAt(_taskData.Count - 1 - index).NameEx
End Function
Private Function GetLegendItemStyle(ByVal index As Integer) As _Style
Return New _Style With {
.Fill = New SolidBrush(_colors((index) Mod _colors.Length))
}
End Function
Private Function GetLegendItemLength() As Integer
Return _taskData.Count
End Function
End Class
' データラベルの設定
Private Sub LabelRendering(ByVal sender As Object, ByVal e As RenderDataLabelEventArgs)
Dim range As Task = CType(e.Item, Task)
If range.StartEx <= range.EndEx Then
Dim minutes As Double = (range.EndEx - range.StartEx).TotalMinutes
e.Text = range.NameEx & ":" + minutes.ToString() & "min"
End If
End Sub
' 横棒の描画
Private Sub Series_SymbolRendering(ByVal sender As Object, ByVal e As RenderSymbolEventArgs)
e.Cancel = True
Dim task As Task = CType(e.Item, Task)
Dim height = FlexChart1.PlotRect.Height / (CType(FlexChart1.DataSource, List(Of Task)).Count) / 2
Dim start = FlexChart1.AxisX.Convert(task.StartEx.ToOADate)
e.Engine.SetFill(New SolidBrush(_colors(((_taskData.Count - (1 - e.Index)) Mod _colors.Length))))
e.Engine.SetStroke(New SolidBrush(_colors(((_taskData.Count - (1 - e.Index)) Mod _colors.Length))))
e.Engine.DrawRect(start, (e.Point.Y - (height / 2)), (e.Point.X - start), height)
End Sub
' データの設定
Public Shared Function GetTasksData() As List(Of Task)
Dim taskList = New List(Of Task)
Dim tempColor = Color.Transparent
taskList.Add(New Task(1, "A1", DateTime.Parse("2022-03-15 08:52:00"), DateTime.Parse("2022-03-15 09:00:00"), tempColor))
taskList.Add(New Task(1, "A2", DateTime.Parse("2022-03-15 09:05:00"), DateTime.Parse("2022-03-15 09:20:00"), tempColor))
taskList.Add(New Task(1, "A3", DateTime.Parse("2022-03-15 09:30:00"), DateTime.Parse("2022-03-15 09:40:00"), tempColor))
taskList.Add(New Task(1, "A4", DateTime.Parse("2022-03-15 09:45:00"), DateTime.Parse("2022-03-15 10:00:00"), tempColor))
taskList.Add(New Task(2, "B1", DateTime.Parse("2022-03-15 09:00:00"), DateTime.Parse("2022-03-15 09:08:00"), tempColor))
taskList.Add(New Task(2, "B2", DateTime.Parse("2022-03-15 09:15:00"), DateTime.Parse("2022-03-15 09:30:00"), tempColor))
taskList.Add(New Task(2, "B3", DateTime.Parse("2022-03-15 09:40:00"), DateTime.Parse("2022-03-15 09:50:00"), tempColor))
taskList.Add(New Task(2, "B4", DateTime.Parse("2022-03-15 10:00:00"), DateTime.Parse("2022-03-15 10:10:00"), tempColor))
Return taskList
End Function
' データ用クラスの定義
Public Class Task
Public Property IDEx As Integer
Public Property NameEx As String
Public Property StartEx As DateTime
Public Property EndEx As DateTime
Public Property ColorEx As Color
Public Sub New(ByVal idex As Integer, ByVal nameex As String, ByVal startex As DateTime, ByVal endex As DateTime, ByVal colorex As Color)
Me.IDEx = idex
Me.NameEx = nameex
Me.StartEx = startex
Me.EndEx = endex
Me.ColorEx = colorex
End Sub
End Class
End Class
◎サンプルコード(C#)
using C1.Chart;
using C1.Win.Chart;
namespace prj_FlexChart
{
public partial class Form1 : Form
{
static List _taskData;
static Color[] _colors = new Color[]
{
Color.FromArgb(171,208,237),
Color.FromArgb(252,201,137),
Color.FromArgb(177,220,182),
Color.FromArgb(248,195,217),
Color.FromArgb(210,192,135),
Color.FromArgb(200,190,235),
Color.FromArgb(245,245,100),
Color.FromArgb(255,155,155),
Color.FromArgb(187,187,187),
};
public Form1()
{
InitializeComponent();
}
private void Form1_Load(object sender, EventArgs e)
{
// データバインドの設定
flexChart1.ChartType = ChartType.Bar;
flexChart1.DataSource = _taskData = GetTasksData();
flexChart1.BindingX = "IDEx";
flexChart1.Header.Content = "タスク管理";
flexChart1.Legend.Position = Position.None;
flexChart1.ToolTip.Active = false;
// シリーズの追加
Series series = new GanttSeriesWithPointLegendItems() { Binding = "EndEx" };
series.SymbolRendering += Series_SymbolRendering;
flexChart1.Series.Add(series);
// データラベルの追加
flexChart1.LabelRendering += LabelRendering;
flexChart1.DataLabel.Position = LabelPosition.Left;
flexChart1.DataLabel.Content = "Value";
// 軸の設定
flexChart1.AxisX.Min = _taskData[0].StartEx.ToOADate();
flexChart1.AxisX.Max = _taskData[_taskData.Count - 1].EndEx.ToOADate();
flexChart1.AxisX.MajorGrid = true;
flexChart1.AxisY.Min = 0;
flexChart1.AxisY.Max = 3;
}
// シリーズの設定
public class GanttSeriesWithPointLegendItems : Series, ISeries
{
string ISeries.GetLegendItemName(int index) { return _taskData.ElementAt(_taskData.Count - 1 - index).NameEx; }
_Style ISeries.GetLegendItemStyle(int index)
{
return new _Style { Fill = new SolidBrush(_colors[(index) % _colors.Length]) };
}
int ISeries.GetLegendItemLength() { return _taskData.Count; }
}
// データラベルの設定
private void LabelRendering(object sender, RenderDataLabelEventArgs e)
{
var range = (Task)e.Item;
if (range.StartEx <= range.EndEx)
{
var minutes = (range.EndEx - range.StartEx).TotalMinutes;
e.Text = range.NameEx + ":" + minutes.ToString() + "min";
}
}
// 横棒の描画
private void Series_SymbolRendering(object sender, RenderSymbolEventArgs e)
{
e.Cancel = true;
Task task = (Task)e.Item;
var height = flexChart1.PlotRect.Height / ((List)flexChart1.DataSource).Count / 2;
var start = flexChart1.AxisX.Convert(task.StartEx.ToOADate());
e.Engine.SetFill(new SolidBrush(_colors[(_taskData.Count - 1 - e.Index) % _colors.Length]));
e.Engine.SetStroke(new SolidBrush(_colors[(_taskData.Count - 1 - e.Index) % _colors.Length]));
e.Engine.DrawRect(start, e.Point.Y - height / 2, e.Point.X - start, height);
}
// データの設定
public static List GetTasksData()
{
var taskList = new List();
var year = DateTime.Now.Year;
taskList.Add(new Task { IDEx = 1, NameEx = "A1", StartEx = DateTime.Parse("2022-03-15 08:52:00"), EndEx = DateTime.Parse("2022-03-15 09:00:00") });
taskList.Add(new Task { IDEx = 1, NameEx = "A2", StartEx = DateTime.Parse("2022-03-15 09:05:00"), EndEx = DateTime.Parse("2022-03-15 09:20:00") });
taskList.Add(new Task { IDEx = 1, NameEx = "A3", StartEx = DateTime.Parse("2022-03-15 09:30:00"), EndEx = DateTime.Parse("2022-03-15 09:40:00") });
taskList.Add(new Task { IDEx = 1, NameEx = "A4", StartEx = DateTime.Parse("2022-03-15 09:45:00"), EndEx = DateTime.Parse("2022-03-15 10:00:00") });
taskList.Add(new Task { IDEx = 2, NameEx = "B1", StartEx = DateTime.Parse("2022-03-15 09:00:00"), EndEx = DateTime.Parse("2022-03-15 09:08:00") });
taskList.Add(new Task { IDEx = 2, NameEx = "B2", StartEx = DateTime.Parse("2022-03-15 09:15:00"), EndEx = DateTime.Parse("2022-03-15 09:30:00") });
taskList.Add(new Task { IDEx = 2, NameEx = "B3", StartEx = DateTime.Parse("2022-03-15 09:40:00"), EndEx = DateTime.Parse("2022-03-15 09:50:00") });
taskList.Add(new Task { IDEx = 2, NameEx = "B4", StartEx = DateTime.Parse("2022-03-15 10:00:00"), EndEx = DateTime.Parse("2022-03-15 10:10:00") });
return taskList;
}
// データ用クラスの定義
public class Task
{
public int IDEx { get; set; }
public string NameEx { get; set; }
public DateTime StartEx { get; set; }
public DateTime EndEx { get; set; }
public Color ColorEx { get; set; }
}
}
}