如何在winforms中制作具有重叠点的甘特图
How can I make a gannt chart with overlapping points in winforms
有一个时间间隔,例如8:00-17:00.In这个时间间隔会多次发生一个任务,例如9:00-9:20,11:00- 12:00,13:00-13:20.I 想在winforms中做一个图表来显示任务发生的时间是这样的。那么我可以用 DEV 甘特图来做到这一点吗?或者有什么控件可以用来制作它吗?
我想在 winforms 中执行此操作。
使用 MSChart 和 ChartType RangeBar 很容易做到这一点。
这是一个例子:
要获得此结果,您需要
- 从数据工具箱添加 MSChart 控件
- 添加 using 子句:
using System.Windows.Forms.DataVisualization.Charting;
- 然后您可以设置图表样式..
- ..并可能设置大小限制
这里是设置代码:
void setUpGantt(Chart chart)
{
chart.Series.Clear();
Series s = chart.Series.Add("gantt");
s.ChartType = SeriesChartType.RangeBar;
s.YValueType = ChartValueType.DateTime;
s.AxisLabel = "";
s.IsVisibleInLegend = false;
Axis ax = chart.ChartAreas[0].AxisX;
Axis ay = chart.ChartAreas[0].AxisY;
ax.MajorGrid.Enabled = false;
ax.MajorTickMark.Enabled = false;
ax.LabelStyle.Format = " ";
ax.Enabled = AxisEnabled.False;
ay.LabelStyle.Format = "HH:mm";
ay.MajorGrid.Enabled = false;
ay.MajorTickMark.Enabled = false;
ay.LineColor = chart.BackColor;
limitGantt(chart, "8:00", "17:00");
}
void limitGantt(Chart chart, string start, string end)
{
Axis ax = chart.ChartAreas[0].AxisX;
ax.Minimum = 0.5; // we have only one slot
ax.Maximum = 1.5; // the bar is centered on its value (1)
Axis ay = chart.ChartAreas[0].AxisY;
ay.Minimum = fromTimeString(start).ToOADate(); // we exclude all times..
ay.Maximum = fromTimeString(end).ToOADate(); // ..outside a given range
}
请注意,为了方便起见,我使用了时间 strings
。当然你也可以改成直接用DateTimes
。要将时间 string
转换为当天的 DateTime
,使用此函数:
DateTime fromTimeString(string time)
{
var p = time.Split(':');
int sec = p.Length == 3 ? Convert.ToInt16(p[2]) : 0;
TimeSpan t = new TimeSpan(Convert.ToInt16(p[0]), Convert.ToInt16(p[1]), sec);
return DateTime.Today.Add(t);
}
请注意,所有代码都缺少任何检查!
要添加任务,使用此方法:
void addGanttTask(Series s, string start, string end, Color c, int slot )
{
DateTime start_ = fromTimeString(start);
DateTime end_ = fromTimeString(end);
int pt = s.Points.AddXY(slot, start_, end_);
s.Points[pt].Color = c;
}
请注意,它同时包含系列和 'slot'。这些插槽用于 x-values,在您的情况下它们都是相同的。但是人们可以很容易地想象出一个更完整的规划器,它有多个条形图用于多种资源,比如不同的房间或团队..
Series 参数将允许覆盖第二个系列,就像您在 this 来自 MSDN 的好例子中看到的那样..
这是我填充图表的方式:
setUpGantt(chart1);
Series s = chart1.Series[0];
addGanttTask(s, "8:00", "17:00", Color.LimeGreen, 1);
addGanttTask(s, "9:00", "9:20", Color.DarkSlateBlue, 1);
addGanttTask(s, "11:00", "12:00", Color.DarkSlateBlue, 1);
addGanttTask(s, "13:00", "13:20", Color.DarkSlateBlue, 1);
请注意,不同的范围可能会重叠并且可能会相互隐藏。在我们的示例中,首先添加绿色条,其他条位于顶部。在 MSDN 示例中,您可以看到黄色条如何变窄以使其下方的条保持可见。他们属于第二个系列。
要更改条形的宽度,请使用
series.SetCustomProperty("PixelPointWidth", "15");
这是一个 DevExpress.XtraCharts.ChartControl 和 ViewType RangeBar
的示例
首先在表格中添加一个DevExpress.XtraCharts.ChartControl。
这是我如何填写图表
rangeBarChart.Series.Clear();
// Create two range bar series.
Series series1 = new Series("Task1", ViewType.RangeBar);
Series series2 = new Series("Task2", ViewType.RangeBar);
series1.CrosshairLabelPattern = "{S}:{V1:HH:mm}--{V2:HH:mm}";
series2.CrosshairLabelPattern = "{S}:{V1:HH:mm}--{V2:HH:mm}";
//Add values to series
series1.ValueScaleType = ScaleType.DateTime;
series2.ValueScaleType = ScaleType.DateTime;
series1.Points.Add(new SeriesPoint("A", Convert.ToDateTime("2019-08-24 8:00"), Convert.ToDateTime("2019-08-24 17:00")));
series2.Points.Add(new SeriesPoint("A", Convert.ToDateTime("2019-08-24 9:00"), Convert.ToDateTime("2019-08-24 10:00")));
series2.Points.Add(new SeriesPoint("A", Convert.ToDateTime("2019-08-24 13:00"), Convert.ToDateTime("2019-08-24 14:00")));
// Add both series to the chart.
rangeBarChart.Series.AddRange(new Series[] { series1, series2 });
((XYDiagram)rangeBarChart.Diagram).Rotated = true;
结果显示如下:
有一个时间间隔,例如8:00-17:00.In这个时间间隔会多次发生一个任务,例如9:00-9:20,11:00- 12:00,13:00-13:20.I 想在winforms中做一个图表来显示任务发生的时间是这样的。那么我可以用 DEV 甘特图来做到这一点吗?或者有什么控件可以用来制作它吗?
我想在 winforms 中执行此操作。
使用 MSChart 和 ChartType RangeBar 很容易做到这一点。
这是一个例子:
要获得此结果,您需要
- 从数据工具箱添加 MSChart 控件
- 添加 using 子句:
using System.Windows.Forms.DataVisualization.Charting;
- 然后您可以设置图表样式..
- ..并可能设置大小限制
这里是设置代码:
void setUpGantt(Chart chart)
{
chart.Series.Clear();
Series s = chart.Series.Add("gantt");
s.ChartType = SeriesChartType.RangeBar;
s.YValueType = ChartValueType.DateTime;
s.AxisLabel = "";
s.IsVisibleInLegend = false;
Axis ax = chart.ChartAreas[0].AxisX;
Axis ay = chart.ChartAreas[0].AxisY;
ax.MajorGrid.Enabled = false;
ax.MajorTickMark.Enabled = false;
ax.LabelStyle.Format = " ";
ax.Enabled = AxisEnabled.False;
ay.LabelStyle.Format = "HH:mm";
ay.MajorGrid.Enabled = false;
ay.MajorTickMark.Enabled = false;
ay.LineColor = chart.BackColor;
limitGantt(chart, "8:00", "17:00");
}
void limitGantt(Chart chart, string start, string end)
{
Axis ax = chart.ChartAreas[0].AxisX;
ax.Minimum = 0.5; // we have only one slot
ax.Maximum = 1.5; // the bar is centered on its value (1)
Axis ay = chart.ChartAreas[0].AxisY;
ay.Minimum = fromTimeString(start).ToOADate(); // we exclude all times..
ay.Maximum = fromTimeString(end).ToOADate(); // ..outside a given range
}
请注意,为了方便起见,我使用了时间 strings
。当然你也可以改成直接用DateTimes
。要将时间 string
转换为当天的 DateTime
,使用此函数:
DateTime fromTimeString(string time)
{
var p = time.Split(':');
int sec = p.Length == 3 ? Convert.ToInt16(p[2]) : 0;
TimeSpan t = new TimeSpan(Convert.ToInt16(p[0]), Convert.ToInt16(p[1]), sec);
return DateTime.Today.Add(t);
}
请注意,所有代码都缺少任何检查!
要添加任务,使用此方法:
void addGanttTask(Series s, string start, string end, Color c, int slot )
{
DateTime start_ = fromTimeString(start);
DateTime end_ = fromTimeString(end);
int pt = s.Points.AddXY(slot, start_, end_);
s.Points[pt].Color = c;
}
请注意,它同时包含系列和 'slot'。这些插槽用于 x-values,在您的情况下它们都是相同的。但是人们可以很容易地想象出一个更完整的规划器,它有多个条形图用于多种资源,比如不同的房间或团队..
Series 参数将允许覆盖第二个系列,就像您在 this 来自 MSDN 的好例子中看到的那样..
这是我填充图表的方式:
setUpGantt(chart1);
Series s = chart1.Series[0];
addGanttTask(s, "8:00", "17:00", Color.LimeGreen, 1);
addGanttTask(s, "9:00", "9:20", Color.DarkSlateBlue, 1);
addGanttTask(s, "11:00", "12:00", Color.DarkSlateBlue, 1);
addGanttTask(s, "13:00", "13:20", Color.DarkSlateBlue, 1);
请注意,不同的范围可能会重叠并且可能会相互隐藏。在我们的示例中,首先添加绿色条,其他条位于顶部。在 MSDN 示例中,您可以看到黄色条如何变窄以使其下方的条保持可见。他们属于第二个系列。
要更改条形的宽度,请使用
series.SetCustomProperty("PixelPointWidth", "15");
这是一个 DevExpress.XtraCharts.ChartControl 和 ViewType RangeBar
的示例首先在表格中添加一个DevExpress.XtraCharts.ChartControl。 这是我如何填写图表
rangeBarChart.Series.Clear();
// Create two range bar series.
Series series1 = new Series("Task1", ViewType.RangeBar);
Series series2 = new Series("Task2", ViewType.RangeBar);
series1.CrosshairLabelPattern = "{S}:{V1:HH:mm}--{V2:HH:mm}";
series2.CrosshairLabelPattern = "{S}:{V1:HH:mm}--{V2:HH:mm}";
//Add values to series
series1.ValueScaleType = ScaleType.DateTime;
series2.ValueScaleType = ScaleType.DateTime;
series1.Points.Add(new SeriesPoint("A", Convert.ToDateTime("2019-08-24 8:00"), Convert.ToDateTime("2019-08-24 17:00")));
series2.Points.Add(new SeriesPoint("A", Convert.ToDateTime("2019-08-24 9:00"), Convert.ToDateTime("2019-08-24 10:00")));
series2.Points.Add(new SeriesPoint("A", Convert.ToDateTime("2019-08-24 13:00"), Convert.ToDateTime("2019-08-24 14:00")));
// Add both series to the chart.
rangeBarChart.Series.AddRange(new Series[] { series1, series2 });
((XYDiagram)rangeBarChart.Diagram).Rotated = true;
结果显示如下: