ASP.NET 多系列折线图答案

【问题标题】：ASP.NET Multi series line chartASP.NET 多系列折线图
【发布时间】：2013-09-26 08:20:18
【问题描述】：

我有以下数据&想知道这是否可以用折线图显示。

数据：

VerNo | Start Date  | End Date
1.1   | 01-Jan-2013 | 31-Jan-2013
1.2   | 01-Feb-2013 | 31-Dec-2099
2.1   | 10-Jan-2013 | 25-Jan-2013
2.2   | 26-Jan-2013 | 16-Feb-2013
3.1   | 16-Mar-2013 | 30-Apr-2013

我需要一个折线图，其中 X 轴为日期，Y 轴为 VerNo，水平线应显示每个版本的开始和结束日期。

谢谢！！！

【问题讨论】：

标签： asp.net asp.net-charts

【解决方案1】：

由于我对图表控件知之甚少，我尝试了一些方法。首先，我在 Y 轴上将数据与 Id=0 绑定以获取日期（可能会做得更好）然后我遍历数据并每行制作一个系列。每个serie我都做了一个随机的颜色，但有时颜色太白，所以不显示。

    public class VersionData
    {
        public int Id  { get; set; }
        public double VersionNo { get; set; }
        public DateTime StartDate { get; set; }
        public DateTime EndDate { get; set; }
    }

    protected void Page_Load(object sender, EventArgs e)
    {
        string dateFormat =  "yyyy MMM dd";
        List<VersionData> version = new List<VersionData>();
        version.Add(new VersionData() { Id=0, VersionNo = 1.1, StartDate = new DateTime(2013, 1, 1), EndDate = new DateTime(2013, 1, 31) });
        version.Add(new VersionData() { Id=0, VersionNo = 1.2, StartDate = new DateTime(2013, 2, 1), EndDate = new DateTime(2013, 12, 31) });
        version.Add(new VersionData() {Id=0,  VersionNo = 2.1, StartDate = new DateTime(2013, 1, 10), EndDate = new DateTime(2013, 1, 25) });
        version.Add(new VersionData() {Id=0,  VersionNo = 2.2, StartDate = new DateTime(2013, 1, 26), EndDate = new DateTime(2013, 2, 16) });
        version.Add(new VersionData() { Id=0, VersionNo = 3.1, StartDate = new DateTime(2013, 3, 16), EndDate = new DateTime(2013, 4, 30) });

        Chart1.Series[0].YValueMembers = "Id";
        Chart1.DataSource = version;

        Random randomGen = new Random();
        KnownColor[] names = (KnownColor[])Enum.GetValues(typeof(KnownColor));

        for (int i = 0; i < version.Count; i++)
        {
            Series s = new Series("s" + i.ToString());
            s.ChartType = SeriesChartType.Line;
            s.Color = Color.FromKnownColor(names[randomGen.Next(names.Length)]);
            s.BorderWidth = 4;
            Chart1.Series.Add(s);
            DataPoint p = new DataPoint();

            p.SetValueXY(version[i].StartDate, version[i].VersionNo);
            s.Points.Add(p);
            DataPoint p2 = new DataPoint();
            p2.SetValueXY(version[i].EndDate, version[i].VersionNo);
            s.Points.Add(p2);
        }

        Chart1.Series[0].XValueMember = "StartDate";
        Chart1.ChartAreas[0].AxisX.Interval = 1;
        Chart1.ChartAreas[0].AxisX.IntervalType = DateTimeIntervalType.Months;
        Chart1.ChartAreas[0].AxisX.LabelStyle.Format = dateFormat;
        Chart1.ChartAreas[0].AxisX.LabelStyle.Angle = -90;
        Chart1.ChartAreas[0].AxisY.Interval = 0.5;
        Chart1.ChartAreas[0].AxisY.LabelStyle.Format = "0.0";
    }

【讨论】：