作成日: 2023/02/07 最終更新日: 2023/02/07
文書種別
使用方法
詳細
FlexChartの横棒グラフ(ChartType.Bar)を使用し、1行に複数のタスクを表示したガントチャートを作成する方法を紹介します。
最初に、タスクを表す「Taskクラス」を作成し、タスクのIDEx/StartEx/EndExプロパティ(それぞれ、タスクのID値/開始時間/終了時間に該当)を定義します。
次いで、同じID値を持つ複数のデータを設定し、Series_SymbolRenderingイベントで、独自に横棒(バー)を描画することで、1行に複数のタスクを表示したガントチャートを生成します。

◎サンプルコード(VB)
最初に、タスクを表す「Taskクラス」を作成し、タスクのIDEx/StartEx/EndExプロパティ(それぞれ、タスクのID値/開始時間/終了時間に該当)を定義します。
次いで、同じID値を持つ複数のデータを設定し、Series_SymbolRenderingイベントで、独自に横棒(バー)を描画することで、1行に複数のタスクを表示したガントチャートを生成します。
◎サンプルコード(VB)
Imports C1.Chart
Imports C1.Win.Chart
Public Class Form1
Dim testTask1 As List(Of Task)
Private Sub Form1_Load(sender As Object, e As EventArgs) Handles MyBase.Load
' データの作成
testTask1 = New List(Of Task)()
Dim tempRect = New Rectangle()
testTask1.Add(New Task(0, 2, 0, tempRect, Color.FromArgb(171, 208, 237)))
testTask1.Add(New Task(0, 5, 3, tempRect, Color.FromArgb(171, 208, 237)))
testTask1.Add(New Task(1, 6, 4, tempRect, Color.FromArgb(177, 220, 182)))
testTask1.Add(New Task(1, 9, 7, tempRect, Color.FromArgb(177, 220, 182)))
testTask1.Add(New Task(2, 8, 6, tempRect, Color.FromArgb(252, 201, 137)))
testTask1.Add(New Task(2, 11, 9, tempRect, Color.FromArgb(252, 201, 137)))
testTask1.Add(New Task(3, 10, 9, tempRect, Color.FromArgb(248, 195, 217)))
testTask1.Add(New Task(3, 12, 11, tempRect, Color.FromArgb(248, 195, 217)))
testTask1.Add(New Task(3, 14, 13, tempRect, Color.FromArgb(248, 195, 217)))
testTask1.Add(New Task(4, 12, 10, tempRect, Color.FromArgb(185, 185, 247)))
testTask1.Add(New Task(4, 15, 13, tempRect, Color.FromArgb(185, 185, 247)))
testTask1.Add(New Task(4, 18, 16, tempRect, Color.FromArgb(185, 185, 247)))
' 描画の停止
FlexChart1.BeginUpdate()
' ガントチャートの作成
FlexChart1.ChartType = ChartType.Bar
Dim series1 As Series = New Series()
series1.Name = "Series1"
series1.DataSource = testTask1
series1.BindingX = "IDEx"
series1.Binding = "EndEx"
AddHandler series1.SymbolRendering, AddressOf Series_SymbolRendering
FlexChart1.Series.Clear()
FlexChart1.Series.Add(series1)
FlexChart1.Legend.Position = Position.None
FlexChart1.Stacking = Stacking.Stacked
FlexChart1.ToolTip.Content = "ID={ID} Start={Start} End={End}"
FlexChart1.ToolTip.Active = False
' 軸ラベルの設定
Dim axisLabels = New KeyValuePair(Of Int32, String)(4) {}
axisLabels(0) = New KeyValuePair(Of Int32, String)(0, "A")
axisLabels(1) = New KeyValuePair(Of Int32, String)(1, "B")
axisLabels(2) = New KeyValuePair(Of Int32, String)(2, "C")
axisLabels(3) = New KeyValuePair(Of Int32, String)(3, "D")
axisLabels(4) = New KeyValuePair(Of Int32, String)(4, "E")
FlexChart1.AxisY.DataSource = axisLabels
FlexChart1.AxisY.Binding = "Key,Value"
' 軸の最小値/最大値の設定
Dim vMin As Integer = Integer.MaxValue
Dim vMax As Integer = Integer.MinValue
For i As Integer = 0 To testTask1.Count - 1
If testTask1(i).StartEx < vMin Then
vMin = testTask1(i).StartEx
End If
If testTask1(i).EndEx > vMax Then
vMax = testTask1(i).EndEx
End If
Next
FlexChart1.AxisX.Min = vMin
FlexChart1.AxisX.Max = vMax
' 描画の再開
FlexChart1.EndUpdate()
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 As Double = FlexChart1.PlotRect.Height / testTask1.Count / 2
Dim left As Double = FlexChart1.AxisX.Convert(task.StartEx)
Dim right As Double = FlexChart1.AxisX.Convert(task.EndEx)
e.Engine.SetFill(New SolidBrush(testTask1(e.Index).ColorEx))
e.Engine.SetStroke(New SolidBrush(Color.FromArgb(200, testTask1(e.Index).ColorEx)))
e.Engine.DrawRect(left, e.Point.Y - (height / 2), right - left, height)
' 描画したバーの矩形(MouseMoveイベントで利用)を保存
testTask1(e.Index).RectangleEx = New RectangleF(CType(left, Single), CType((e.Point.Y _
- (height / 2)), Single), CType((right - left), Single), CType(height, Single))
End Sub
Private Sub FlexChart1_MouseMove(sender As Object, e As MouseEventArgs) Handles FlexChart1.MouseMove
' バー以外ではツールチップを非表示に設定
Dim isContained = False
For Each task As Task In testTask1
If task.RectangleEx.Contains(e.Location) Then
isContained = True
Exit For
End If
Next
FlexChart1.ToolTip.Active = isContained
End Sub
Public Class Task
Public Property IDEx As Integer
Public Property EndEx As Integer
Public Property StartEx As Integer
Public Property RectangleEx As RectangleF
Public Property ColorEx As Color
Public Sub New(ByVal idex As Integer, ByVal endex As Integer, ByVal startex As Integer, ByVal rectangleex As RectangleF, ByVal colorex As Color)
Me.IDEx = idex
Me.EndEx = endex
Me.StartEx = startex
Me.RectangleEx = rectangleex
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
{
private List testTask1;
public Form1()
{
InitializeComponent();
}
private void Form1_Load(object sender, EventArgs e)
{
// データの作成
testTask1 = new List();
testTask1.Add(new Task() { IDEx = 0, EndEx = 2, StartEx = 0, ColorEx = Color.FromArgb(171, 208, 237) });
testTask1.Add(new Task() { IDEx = 0, EndEx = 5, StartEx = 3, ColorEx = Color.FromArgb(171, 208, 237) });
testTask1.Add(new Task() { IDEx = 1, EndEx = 6, StartEx = 4, ColorEx = Color.FromArgb(177, 220, 182) });
testTask1.Add(new Task() { IDEx = 1, EndEx = 9, StartEx = 7, ColorEx = Color.FromArgb(177, 220, 182) });
testTask1.Add(new Task() { IDEx = 2, EndEx = 8, StartEx = 6, ColorEx = Color.FromArgb(252, 201, 137) });
testTask1.Add(new Task() { IDEx = 2, EndEx = 11, StartEx = 9, ColorEx = Color.FromArgb(252, 201, 137) });
testTask1.Add(new Task() { IDEx = 3, EndEx = 10, StartEx = 9, ColorEx = Color.FromArgb(248, 195, 217) });
testTask1.Add(new Task() { IDEx = 3, EndEx = 12, StartEx = 11, ColorEx = Color.FromArgb(248, 195, 217) });
testTask1.Add(new Task() { IDEx = 3, EndEx = 14, StartEx = 13, ColorEx = Color.FromArgb(248, 195, 217) });
testTask1.Add(new Task() { IDEx = 4, EndEx = 12, StartEx = 10, ColorEx = Color.FromArgb(185, 185, 247) });
testTask1.Add(new Task() { IDEx = 4, EndEx = 15, StartEx = 13, ColorEx = Color.FromArgb(185, 185, 247) });
testTask1.Add(new Task() { IDEx = 4, EndEx = 18, StartEx = 16, ColorEx = Color.FromArgb(185, 185, 247) });
// 描画の停止
flexChart1.BeginUpdate();
// ガントチャートの作成
flexChart1.ChartType = ChartType.Bar;
var series1 = new Series();
series1.Name = "Series1";
series1.DataSource = testTask1;
series1.BindingX = "IDEx";
series1.Binding = "EndEx";
series1.SymbolRendering += Series_SymbolRendering;
flexChart1.Series.Clear();
flexChart1.Series.Add(series1);
flexChart1.Legend.Position = Position.None;
flexChart1.Stacking = Stacking.Stacked;
flexChart1.ToolTip.Content = "ID={IDEx} Start={StartEx} End={EndEx}";
flexChart1.ToolTip.Active = false;
// 軸ラベルの設定
var axisLabels = new KeyValuePair<Int32, String>[5];
axisLabels[0] = new KeyValuePair<Int32, String>(0, "A");
axisLabels[1] = new KeyValuePair<Int32, String>(1, "B");
axisLabels[2] = new KeyValuePair<Int32, String>(2, "C");
axisLabels[3] = new KeyValuePair<Int32, String>(3, "D");
axisLabels[4] = new KeyValuePair<Int32, String>(4, "E");
flexChart1.AxisY.DataSource = axisLabels;
flexChart1.AxisY.Binding = "Key,Value";
// 軸の最小値/最大値の設定
int vMin = int.MaxValue;
int vMax = int.MinValue;
for (int i = 0; i < testTask1.Count; i++)
{
if (testTask1[i].StartEx < vMin)
{
vMin = testTask1[i].StartEx;
}
if (testTask1[i].EndEx > vMax)
{
vMax = testTask1[i].EndEx;
}
}
flexChart1.AxisX.Min = vMin;
flexChart1.AxisX.Max = vMax;
// 描画の再開
flexChart1.EndUpdate();
}
private void Series_SymbolRendering(object sender, RenderSymbolEventArgs e)
{
// 既定の描画のキャンセル
e.Cancel = true;
// 独自にバーを描画
var task = (Task)e.Item;
double height = flexChart1.PlotRect.Height / testTask1.Count / 2;
double left = flexChart1.AxisX.Convert(task.StartEx);
double right = flexChart1.AxisX.Convert(task.EndEx);
e.Engine.SetFill(new SolidBrush(testTask1[e.Index].ColorEx));
e.Engine.SetStroke(new SolidBrush(Color.FromArgb(200, testTask1[e.Index].ColorEx)));
e.Engine.DrawRect(left, e.Point.Y - height / 2, right - left, height);
// 描画したバーの矩形(MouseMoveイベントで利用)を保存
testTask1[e.Index].RectangleEx = new RectangleF((float)left, (float)(e.Point.Y - height / 2), (float)(right - left), (float)height);
}
private void flexChart1_MouseMove(object sender, MouseEventArgs e)
{
// バー以外ではツールチップを非表示に設定
var isContained = false;
foreach (Task task in testTask1)
{
if (task.RectangleEx.Contains(e.Location))
{
isContained = true;
break;
}
}
flexChart1.ToolTip.Active = isContained;
}
public class Task
{
public int IDEx { get; set; }
public int EndEx { get; set; }
public int StartEx { get; set; }
public RectangleF RectangleEx { get; set; }
public Color ColorEx { get; set; }
}
}
}