How to create a timeline chart control thing?

问题:

I am trying to create a timeline, and have been trying to use chart control. but it is not working out as i only need the X value and the chart series is like, only AddY or AddXY, there's no AddX/AddXX2.

I know there's like, questions like this before and stuff. There's this person that asked

How to create a timeline control?

like, 3 years ago but i'm not sure what exactly they are saying in the answers and comments..

My current code is:

 DirectoryInfo dInfo = new DirectoryInfo(tbSelectFolder.Text);
        FileInfo[] Files = dInfo.GetFiles("*.ts");
        List<string> fileNames = new List<string>();

        List<DateTime> fileDates = new List<DateTime>();


        chart1.ChartAreas[0].AxisX.MajorGrid.LineColor = Color.White;
        chart1.ChartAreas[0].AxisY.MajorGrid.LineColor = Color.White;
        chart1.ChartAreas[0].AxisX.MajorGrid.LineDashStyle = ChartDashStyle.Solid;
        chart1.ChartAreas[0].AxisY.MajorGrid.LineDashStyle = ChartDashStyle.Dash;
        chart1.ChartAreas[0].AxisX.LabelStyle.ForeColor = Color.White;
        chart1.ChartAreas[0].AxisY.LabelStyle.ForeColor = Color.White;
        chart1.ChartAreas[0].AxisX2.Enabled = AxisEnabled.True;

        foreach (FileInfo file in Files)
        {
            string filename = Path.GetFileNameWithoutExtension(file.Name);
            string[] fileNameSplit = filename.Split(' ');
            fileNames.Add(fileNameSplit[0]);

            DateTime date = DateTime.ParseExact(fileNameSplit[1], "yyMMdd",null);
            fileDates.Add(date);
        }


        foreach (var value in fileNames)
        {
            foreach (var value1 in fileDates)
            {
                chart1.Series["US"].Points.AddXY(value1, value); 
            }
        }

This basically gives me this

The timeline i'm trying to create is basically like a time table. So, is there a way to make it look something like this

回答1:

Here is a possible solution:

    // set up from clean slate:
    chart1.ChartAreas.Clear();
    chart1.Series.Clear();
    ChartArea CA = chart1.ChartAreas.Add("CA");
    Series S1 = chart1.Series.Add("S1");
    S1.ChartType = SeriesChartType.Column;  // whatever..

    // a few restriction for my own files:
    CA.AxisX.Maximum = new DateTime(2014, 12, 31).ToOADate();
    DirectoryInfo dInfo = new DirectoryInfo("D:\\");
    FileInfo[] Files = dInfo.GetFiles("f*.png");

    // staying with the file info list!
    //List<string> fileNames = new List<string>();
    //List<DateTime> fileDates = new List<DateTime>();

    chart1.ChartAreas[0].AxisX.MajorGrid.LineColor = Color.White;
    chart1.ChartAreas[0].AxisY.MajorGrid.LineColor = Color.White;
    chart1.ChartAreas[0].AxisX.MajorGrid.LineDashStyle = ChartDashStyle.Solid;
    chart1.ChartAreas[0].AxisY.MajorGrid.LineDashStyle = ChartDashStyle.Dash;
    chart1.ChartAreas[0].AxisX.LabelStyle.ForeColor = Color.White;
    chart1.ChartAreas[0].AxisY.LabelStyle.ForeColor = Color.White;
    chart1.ChartAreas[0].AxisX2.Enabled = AxisEnabled.True;

    S1.IsValueShownAsLabel = true;
    S1.LabelFormat = "YYY.MM";

    // restrict to 20 files max:
    for (int i = 0; i < Math.Min(20, Files.Length); i++)
    {
        FileInfo FI = Files[i];
        int p = chart1.Series[0].Points.AddXY(FI.CreationTime, 1);
        S1.Points[p].Label = Path.GetFileNameWithoutExtension(FI.FullName);
    }

回答2:

I hope this fits your needs: unfortunately the axis-label aren't perfect, thats why you can remove them completely by uncommenting the first three line of code .

//Just pass your list of dates to this function
private void DrawTimeline(List<DateTime> dates)
{

    //chart1.ChartAreas[0].AxisX.MajorGrid.LineColor = Color.Black;
    //chart1.ChartAreas[0].AxisY.MajorGrid.LineColor = Color.White;
    //chart1.ChartAreas[0].AxisX.LabelStyle.Enabled = false;
    chart1.ChartAreas[0].AxisY.IsStartedFromZero = false;

    //initialize a legend with some settings
    chart1.Legends.Clear();
    chart1.Legends.Add("Timespans");
    chart1.Legends[0].LegendStyle = LegendStyle.Table;
    chart1.Legends[0].Docking = Docking.Bottom;
    chart1.Legends[0].Alignment = StringAlignment.Center;
    chart1.Legends[0].Title = "Timespans";
    chart1.Legends[0].BorderColor = Color.Black;

    chart1.Series.Clear();
    string seriesname;
    //adding the bars with some settings
    for (int i = 0; i < dates.Count-1; i++)
    {
        seriesname = Convert.ToString(dates[i].Date + " - " + dates[i + 1].Date);
        chart1.Series.Add(seriesname);
        chart1.Series[seriesname].ChartType = SeriesChartType.RangeBar;
        chart1.Series[seriesname].YValuesPerPoint = 2;
        chart1.Series[seriesname].Points.AddXY("Timeline", dates[i].Date, dates[i + 1].Date);
        chart1.Series[seriesname]["DrawSideBySide"] = "false";
        chart1.Series[seriesname].BorderColor = Color.Black;
        chart1.Series[seriesname].ToolTip = seriesname;
    }
}