如何在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;

结果显示如下: