如何使用Web.UI.DataVisualization.Charting绘制图表？

Question

using System.Web.UI.DataVisualization.Charting.Chart

I have data in 2 formats:
A.

B.

The data in format A is what I am using to build a chart. But my chart ends up looking like:

I cannot figure out how come no lines are drawn. Here is the code I am using:

var dataTable = GetDataTable();
var xAxisTitle = dataTable.Columns[1].ExtendedProperties["Type"].ToString();
var yAxisTitle = dataTable.Columns[0].ExtendedProperties["Type"].ToString();

chart = new Chart() {
    AntiAliasing = AntiAliasingStyles.All,
    TextAntiAliasingQuality = TextAntiAliasingQuality.High,
    Width = 1200,
    Height = 800,
    Enabled = true,
    ForeColor = Color.SaddleBrown
};

var chartArea = new ChartArea() {
    BackColor = Color.White,

    AxisY = new Axis() {
        Enabled = AxisEnabled.True,
        Title = yAxisTitle,
        LineColor = Color.DarkBlue,
        MajorTickMark = new TickMark() {
            Enabled = true,
            LineColor = Color.DarkGreen,
            Interval = .1d
        },
        MinorTickMark = new TickMark() {
            Enabled = true,
            LineColor = Color.Green,
            Interval = .1d
        },
        LabelStyle = new LabelStyle() {
            Enabled = true,
            ForeColor = Color.Red,
            IsEndLabelVisible = true,
            Font = new Font("Calibri", 4, FontStyle.Regular)
        },
        MajorGrid = new Grid() {
            Enabled = true,
            LineColor = Color.LightGray,
            LineWidth = 1
        },
    },

    AxisX = new Axis() {
        Enabled = AxisEnabled.True,
        Title = xAxisTitle,
        LineColor = Color.DarkBlue,
        MajorTickMark = new TickMark() {
            Enabled = true,
            LineColor = Color.Red,
            Interval = .1d
        },
        MinorTickMark = new TickMark() {
            Enabled = true,
            LineColor = Color.DarkGreen,
            Interval = .1d
        },
        LabelStyle = new LabelStyle() {
            Enabled = true,
            ForeColor = Color.Blue,
            IsEndLabelVisible = true,
            Font = new Font("Calibri", 4, FontStyle.Regular)
        },
        MajorGrid = new Grid() {
            Enabled = true,
            LineColor = Color.DarkGray,
            LineWidth = 1
        },
    },
};

chartArea.AxisX.Enabled = AxisEnabled.True;
chartArea.AxisY.Enabled = AxisEnabled.True;
chart.ChartAreas.Add(chartArea);

var lineHeaders = dataTable.Rows
    .OfType<DataRow>()
    .Select(r => r[0].ToString())
    .ToArray();

var i = 0;
for (int column = 0; column < lineHeaders.Length; column++) {
    var header = lineHeaders[column];

    var series = chart.Series[header] = new Series() {
        Enabled = true,
        Name = header,
        Font = new Font("Lucida Sans Unicode", 6f),
        Color = legendColors[header],
        ChartType = SeriesChartType.Line,
        XValueType = ChartValueType.DateTime,
        YValueType = ChartValueType.Double,
    };

    var colData = dataTable.Rows[column]
        .ItemArray
        .Skip(1)
        .Select(d => (double)d)
        .ToArray();

    DataPoint p = new DataPoint() {
        AxisLabel = header,
        XValue = i++,
        YValues = colData,
    };

    series.Points.Add(p);
}

I've also set the data table as the data source on the Chart but there are no data points plotted.

Am I even using the correct data table ...should I be using format B instead?

Answer 1

I proceeded with the table format option B :

Other codes changes were minimal but re-posting the entire snippet below. The primary fix are these two lines at the end of the method:

   chart.DataSource = DataTable;
   chart.DataBind();  

internal void BuildChart(DataTable DataTable) {
    var xAxisTitle = DataTable.Columns[1].ExtendedProperties["Type"].ToString();
    var yAxisTitle = DataTable.Columns[0].ExtendedProperties["Type"].ToString();

    chart = new Chart() {
        AntiAliasing = AntiAliasingStyles.All,
        TextAntiAliasingQuality = TextAntiAliasingQuality.High,
        Width = 1800,
        Height = 500,
        Enabled = true,
        ForeColor = Color.SaddleBrown
    };

    #region build chart area
    var chartArea = new ChartArea() {
        BackColor = Color.White,
        Name = DataTable.TableName,

        AxisY = new Axis() {
            Enabled = AxisEnabled.True,
            Title = yAxisTitle,
            LineColor = Color.DarkBlue,
            MajorTickMark = new TickMark() {
                Enabled = true,
                LineColor = Color.DarkGreen,
            },
            MinorTickMark = new TickMark() {
                Enabled = true,
                LineColor = Color.Green,
            },
            LabelStyle = new LabelStyle() {
                Enabled = true,
                ForeColor = Color.Red,
                IsEndLabelVisible = true,
                Font = new Font("Calibri", 4, FontStyle.Regular)
            },
            MajorGrid = new Grid() {
                Enabled = true,
                LineColor = Color.LightGray,
                LineWidth = 1
            },
        },

        AxisX = new Axis() {
            Enabled = AxisEnabled.True,
            Title = xAxisTitle,
            LineColor = Color.DarkBlue,
            MajorTickMark = new TickMark() {
                Enabled = true,
                LineColor = Color.Red,
            },
            MinorTickMark = new TickMark() {
                Enabled = true,
                LineColor = Color.DarkGreen,
            },
            LabelStyle = new LabelStyle() {
                Enabled = true,
                ForeColor = Color.Blue,
                IsEndLabelVisible = true,
                Font = new Font("Calibri", 4, FontStyle.Regular)
            },
            MajorGrid = new Grid() {
                Enabled = true,
                LineColor = Color.DarkGray,
                LineWidth = 1
            },
        },
    };

    chartArea.AxisX.Enabled = AxisEnabled.True;
    chartArea.AxisY.Enabled = AxisEnabled.True;
    #endregion

    chart.ChartAreas.Add(chartArea);

    var seriesHeaders = DataTable.Columns
        .OfType<DataColumn>()
        .Skip(1)
        .Select(c => c.ColumnName)
        .ToArray();

    chart.Legends.Add(new Legend(DataTable.TableName) {
        Enabled = true
    });

    for (int column = 0; column < seriesHeaders.Length; column++) {
        var header = seriesHeaders[column];

        var series = chart.Series[header] = new Series(header) {
            BorderWidth = 2,
            ChartArea = DataTable.TableName,
            ChartType = SeriesChartType.FastLine,
            Color = legendColors[header],
            Enabled = true,
            Font = new Font("Lucida Sans Unicode", 6f),
            XValueMember = "Week",
            YValueMembers = header
        };

        series.EmptyPointStyle.MarkerColor = legendColors[header];
    }

    chart.DataSource = DataTable;
    chart.DataBind();
}