如何在winforms中创建具有重叠点的gannt图表

Question

有一个时间间隔，如8：00-17：00。在这个时间间隔发生几次任务，例如9：00-9：20,11：00-12：00,13：00-13：20.I想要在winforms中创建一个图表，以显示任务何时发生。 那么我可以用DEV gannt图表做到这一点吗？ 或者我可以使用任何控制来制作它？

我想在winforms中做到这一点。

Answer 1

使用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;
}

请注意，它包含一个系列和一个'插槽'。 插槽用于x值，在您的情况下都是相同的。 但是，人们可以很容易地想象一个更多的comples规划师与几个资源，如各种房间或团队。

Series参数允许覆盖第二个系列，就像你在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");

Answer 2

以下是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;

结果显示如下：