Home 소개       다운로드       온라인 설명서      주식/코인 차트    Q & A     Blog    

히포차트 4.3 - 간트차트(Gantt chart) 마우스 이동하여 날짜 변경하기







간트차트에서 각 항목의 날짜를 마우스를 이동하여 늘리고 줄이는 코드를 소개합니다.

마우스업, 마우스다운, 마우스무브 3개의 이벤트를 이용해서 마우스를 해당 아이템에 찍은 상태에서 가로로 늘리면 일정이 늘어나거나 줄어들어 새로운 막대를 그려냅니다.

디비 업데이트 등을 mouseup 이벤트에 삽입할 경우 더욱 활용도가 높다 할 수 있습니다.




Gantt chart  Gantt chart - multi series  Gantt chart - arrow, process, peoples  간트차트 - 시간/분 스케일  히포차트 4.1 - 간트차트 (마일스톤, 그룹화)  간트차트 좀 더 자세한 설정  히포차트 4.3 - 날짜형 축을 이용한 간트차트 (월별)  히포차트 4.3 - 간트차트(Gantt chart) 마우스 이동하여 날짜 변경하기  


C#
 
private void Gantt()
{
SeriesList sList = new SeriesList();
sList.SeriesCollection.Add(new Series());
sList.ChartType = ChartType.Gantt;
sList.AxisFactor.YAxis.DataType = AxisDataType.DateTime;
sList.AxisFactor.YAxis.DateTimeLabelType = DateTimeLabelType.Month;
sList.AxisFactor.YAxis.AxisUnitText = "월";
sList.AxisFactor.YAxis.DateTimeFormat = "MM";
sList.AxisFactor.YAxis.Direction = AxisDirection.Top;
sList.AxisFactor.XAxis.IsInverseAxis = true;
sList.SeriesCollection[0].Column.WidthType = ColumnWidthType.Custom;
sList.SeriesCollection[0].Column.Width = 25;
sList.SeriesCollection[0].SeriesColor = Color.Yellow;
sList.SeriesCollection[0].FigureTextLocation = FigureTextLocation.Left;
sList.SeriesCollection[0].SeriesColor = Color.YellowGreen;

Random R = new Random();
for(int i = 0; i < 10; i++)
{
SeriesItem item = new SeriesItem();
item.YStartDateTimeValue = DateTime.Now.AddDays(i - R.Next(5, 10));
item.YDateTimeValue = DateTime.Now.AddDays(i + R.Next(20, 50));
item.Name = "프로젝트 일정 " + i.ToString();
item.IsShowFigureText = true;
item.Label.Font = new Font("tahoma", 10, FontStyle.Bold);

sList.SeriesCollection[0].items.Add(item);
}

this.hHippoChart1.SeriesListDictionary.Add(sList);
this.hHippoChart1.DrawChart();
}

bool IsMouseDown = false;
int selectedIdx;

///
/// 마우스로 해당 날짜를 클릭하고 있을때
///

///
///
private void hHippoChart1_ChartMouseDown(object sender, MouseEventArgs e)
{
if (e.Button == MouseButtons.Left)
{
IsMouseDown = true;

for(int i = 0; i < this.hHippoChart1.SeriesListDictionary[0].SeriesCollection[0].items.Count; i++)
{
float columnwidth = this.hHippoChart1.SeriesListDictionary[0].SeriesCollection[0].items[i].Column.Width;

PointF firstpoint = new PointF(
this.hHippoChart1.SeriesListDictionary[0].SeriesCollection[0].items[i].ColumStartPoint.X,
this.hHippoChart1.SeriesListDictionary[0].SeriesCollection[0].items[i].ColumStartPoint.Y - columnwidth / 2);

float lastPoX = (float)(this.hHippoChart1.SeriesListDictionary[0].SeriesCollection[0].items[i].ColumEndPoint.X);
float lastPoY = (float)(this.hHippoChart1.SeriesListDictionary[0].SeriesCollection[0].items[i].ColumEndPoint.Y + columnwidth);

PointF lastPoint = new PointF(lastPoX, lastPoY);

if (e.X >= firstpoint.X && e.X <= lastPoint.X && e.Y >= firstpoint.Y && e.Y <= lastPoint.Y)
{
this.hHippoChart1.SeriesListDictionary[0].SeriesCollection[0].items[i].ItemColor = Color.Yellow;
selectedIdx = i;
}
}
}
}

///
/// 마우스를 누른 상태에서 이동했을때
///

///
///
private void hHippoChart1_ChartMouseMove(object sender, MouseEventArgs e)
{
if (e.Button == MouseButtons.Left)
{
if (IsMouseDown)
{
float unitVal = (float)(this.hHippoChart1.SeriesListDictionary[0].AxisFactor.YAxis.Interval / this.hHippoChart1.SeriesListDictionary[0].AxisFactor.YAxis.UnitPixel);
string flag = "";
int addDAy = 0;

if (e.X - this.hHippoChart1.SeriesListDictionary[0].SeriesCollection[0].items[selectedIdx].ColumEndPoint.X > 0)
{
flag = "일정늘리기"; // 이해를 돕기위해 한글로 ^^
addDAy = (int)((e.X - this.hHippoChart1.SeriesListDictionary[0].SeriesCollection[0].items[selectedIdx].ColumEndPoint.X) * unitVal);
}

if (e.X - this.hHippoChart1.SeriesListDictionary[0].SeriesCollection[0].items[selectedIdx].ColumStartPoint.X < 0)
{
flag = "일정당기기";
addDAy = (int)((e.X - this.hHippoChart1.SeriesListDictionary[0].SeriesCollection[0].items[selectedIdx].ColumStartPoint.X) * unitVal);
}

if(flag == "일정늘리기")
{
this.hHippoChart1.SeriesListDictionary[0].SeriesCollection[0].items[selectedIdx].YDateTimeValue =
this.hHippoChart1.SeriesListDictionary[0].SeriesCollection[0].items[selectedIdx].YDateTimeValue.AddDays(addDAy);
}
else if (flag == "일정당기기")
{
this.hHippoChart1.SeriesListDictionary[0].SeriesCollection[0].items[selectedIdx].YStartDateTimeValue =
this.hHippoChart1.SeriesListDictionary[0].SeriesCollection[0].items[selectedIdx].YStartDateTimeValue.AddDays(addDAy);
}

this.hHippoChart1.DrawChart();
}
}
}

///
/// 마우스로 날짜를 찍고 이동시킨후 놨을때
///

///
///
private void hHippoChart1_ChartMouseUp(object sender, MouseEventArgs e)
{
if (e.Button == MouseButtons.Left)
{
this.hHippoChart1.SeriesListDictionary[0].SeriesCollection[0].items[selectedIdx].ItemColor = Color.YellowGreen;

this.hHippoChart1.DrawChart();
}

IsMouseDown = false;
}


VB
 
Private Sub Gantt()
Dim sList As New. SeriesList()
sList.SeriesCollection.Add(New Series())
sList.ChartType = ChartType.Gantt
sList.AxisFactor.YAxis.DataType = AxisDataType.DateTime
sList.AxisFactor.YAxis.DateTimeLabelType = DateTimeLabelType.Month
sList.AxisFactor.YAxis.AxisUnitText = "월"
sList.AxisFactor.YAxis.DateTimeFormat = "MM"
sList.AxisFactor.YAxis.Direction = AxisDirection.Top
sList.AxisFactor.XAxis.IsInverseAxis = True
sList.SeriesCollection(0).Column.WidthType = ColumnWidthType.[Custom]
sList.SeriesCollection(0).Column.Width = 25
sList.SeriesCollection(0).SeriesColor = Color.Yellow
sList.SeriesCollection(0).FigureTextLocation = FigureTextLocation.Left
sList.SeriesCollection(0).SeriesColor = Color.YellowGreen

Dim R As New. Random()
For i As Integer = 0 To 9
Dim item As New. SeriesItem()
item.YStartDateTimeValue = DateTime.Now.AddDays(i - R.[Next](5, 10))
item.YDateTimeValue = DateTime.Now.AddDays(i + R.[Next](20, 50))
item.Name = "프로젝트 일정 " + i.ToString()
item.IsShowFigureText = True
item.Label.Font = New Font("tahoma", 10, FontStyle.Bold)

sList.SeriesCollection(0).items.Add(item)
Next

Me.hHippoChart1.SeriesListDictionary.Add(sList)
Me.hHippoChart1.DrawChart()
End Sub

Private IsMouseDown As Boolean = False
Private selectedIdx As Integer

```
``` 마우스로 해당 날짜를 클릭하고 있을때
```

```
```
Private Sub hHippoChart1_ChartMouseDown(sender As Object, e As MouseEventArgs)
If e.Button = MouseButtons.Left Then
IsMouseDown = True

For i As Integer = 0 To Me.hHippoChart1.SeriesListDictionary(0).SeriesCollection(0).items.Count - 1
Dim columnwidth As Single = Me.hHippoChart1.SeriesListDictionary(0).SeriesCollection(0).items(i).Column.Width

Dim firstpoint As New. PointF(Me.hHippoChart1.SeriesListDictionary(0).SeriesCollection(0).items(i).ColumStartPoint.X, Me.hHippoChart1.SeriesListDictionary(0).SeriesCollection(0).items(i).ColumStartPoint.Y - columnwidth / 2)

Dim lastPoX As Single = CSng(Me.hHippoChart1.SeriesListDictionary(0).SeriesCollection(0).items(i).ColumEndPoint.X)
Dim lastPoY As Single = CSng(Me.hHippoChart1.SeriesListDictionary(0).SeriesCollection(0).items(i).ColumEndPoint.Y + columnwidth)

Dim lastPoint As New. PointF(lastPoX, lastPoY)

If e.X >= firstpoint.X AndAlso e.X <= lastPoint.X AndAlso e.Y >= firstpoint.Y AndAlso e.Y <= lastPoint.Y Then
Me.hHippoChart1.SeriesListDictionary(0).SeriesCollection(0).items(i).ItemColor = Color.Yellow
selectedIdx = i
End If
Next
End If
End Sub

```
``` 마우스를 누른 상태에서 이동했을때
```

```
```
Private Sub hHippoChart1_ChartMouseMove(sender As Object, e As MouseEventArgs)
If e.Button = MouseButtons.Left Then
If IsMouseDown Then
Dim unitVal As Single = CSng(Me.hHippoChart1.SeriesListDictionary(0).AxisFactor.YAxis.Interval / Me.hHippoChart1.SeriesListDictionary(0).AxisFactor.YAxis.UnitPixel)
Dim flag As String = ""
Dim addDAy As Integer = 0

If e.X - Me.hHippoChart1.SeriesListDictionary(0).SeriesCollection(0).items(selectedIdx).ColumEndPoint.X > 0 Then
flag = "일정늘리기"
` 이해를 돕기위해 한글로 ^^
addDAy = CInt((e.X - Me.hHippoChart1.SeriesListDictionary(0).SeriesCollection(0).items(selectedIdx).ColumEndPoint.X) * unitVal)
End If

If e.X - Me.hHippoChart1.SeriesListDictionary(0).SeriesCollection(0).items(selectedIdx).ColumStartPoint.X < 0 Then
flag = "일정당기기"
addDAy = CInt((e.X - Me.hHippoChart1.SeriesListDictionary(0).SeriesCollection(0).items(selectedIdx).ColumStartPoint.X) * unitVal)
End If

If flag = "일정늘리기" Then
Me.hHippoChart1.SeriesListDictionary(0).SeriesCollection(0).items(selectedIdx).YDateTimeValue = Me.hHippoChart1.SeriesListDictionary(0).SeriesCollection(0).items(selectedIdx).YDateTimeValue.AddDays(addDAy)
ElseIf flag = "일정당기기" Then
Me.hHippoChart1.SeriesListDictionary(0).SeriesCollection(0).items(selectedIdx).YStartDateTimeValue = Me.hHippoChart1.SeriesListDictionary(0).SeriesCollection(0).items(selectedIdx).YStartDateTimeValue.AddDays(addDAy)
End If

Me.hHippoChart1.DrawChart()
End If
End If
End Sub

```
``` 마우스로 날짜를 찍고 이동시킨후 놨을때
```

```
```
Private Sub hHippoChart1_ChartMouseUp(sender As Object, e As MouseEventArgs)
If e.Button = MouseButtons.Left Then
Me.hHippoChart1.SeriesListDictionary(0).SeriesCollection(0).items(selectedIdx).ItemColor = Color.YellowGreen

Me.hHippoChart1.DrawChart()
End If

IsMouseDown = False
End Sub


※ 히포차트 샘플 코드는 버전별로 상이한 결과를 나타낼 수 있습니다.

이 코드 관련 문의 사항은 페이스북 리플을 달아주시거나 아래 이메일로 이 페이지 주소와 함께 문의주세요.

helpdesk@hippochart.com





Copyright © 2009-2018 HippoChart. Inc.  All Rights Reserved.