MSChart：折线图 UI 看起来不正确

Question

我试图从数据 table 生成 winform 折线图，但 UI 看起来不太好。

查看 UI

另请参阅我的完整示例代码。我相信我在代码中遗漏了一些图表 UI 看起来不太好的东西。我不明白图表中出现白框的原因是什么？

请查看我的完整代码并告诉我我的代码中需要添加或纠正的内容。

代码

   private void show()
        {
            DataRow dr = null;
            DataTable dt = new DataTable();
            dt.Columns.Add("Date", typeof(DateTime));
            dt.Columns.Add("data", typeof(Int32));
            dt.Columns.Add("CountryCode", typeof(string));

            dr = dt.NewRow();
            dr[0] = DateTime.Parse("01/01/2017");
            dr[1] = 03;
            dr[2] = "GB";
            dt.Rows.Add(dr);

            dr = dt.NewRow();
            dr[0] = DateTime.Parse("02/01/2017");
            dr[1] = 09;
            dr[2] = "GB";
            dt.Rows.Add(dr);

            dr = dt.NewRow();
            dr[0] = DateTime.Parse("03/01/2017");
            dr[1] = 15;
            dr[2] = "GB";
            dt.Rows.Add(dr);

            dr = dt.NewRow();
            dr[0] = DateTime.Parse("04/01/2017");
            dr[1] = 22;
            dr[2] = "GB";
            dt.Rows.Add(dr);

            dr = dt.NewRow();
            dr[0] = DateTime.Parse("05/01/2017");
            dr[1] = 13;
            dr[2] = "GB";
            dt.Rows.Add(dr);

            dr = dt.NewRow();
            dr[0] = DateTime.Parse("06/01/2017");
            dr[1] = 22;
            dr[2] = "GB";
            dt.Rows.Add(dr);

            dr = dt.NewRow();
            dr[0] = DateTime.Parse("07/01/2017");
            dr[1] = 07;
            dr[2] = "GB";
            dt.Rows.Add(dr);

            dr = dt.NewRow();
            dr[0] = DateTime.Parse("08/01/2017");
            dr[1] = 11;
            dr[2] = "GB";
            dt.Rows.Add(dr);


            Chart1.BorderSkin.SkinStyle = System.Windows.Forms.DataVisualization.Charting.BorderSkinStyle.Emboss;
            //Chart1.BorderSkin.SkinStyle = BorderSkinStyle.Emboss;
            Chart1.BorderlineColor = System.Drawing.Color.FromArgb(26, 59, 105);
            Chart1.BorderlineWidth = 3;
            Chart1.BackColor = Color.NavajoWhite;

            Chart1.ChartAreas.Add("chtArea");
            Chart1.ChartAreas[0].AxisX.Title = "Category Name";
            Chart1.ChartAreas[0].AxisX.TitleFont = new System.Drawing.Font("Verdana", 11, System.Drawing.FontStyle.Bold);
            Chart1.ChartAreas[0].AxisY.Title = "UnitPrice";
            Chart1.ChartAreas[0].AxisY.TitleFont = new System.Drawing.Font("Verdana", 11, System.Drawing.FontStyle.Bold);
            Chart1.ChartAreas[0].BorderDashStyle = System.Windows.Forms.DataVisualization.Charting.ChartDashStyle.Solid;
            Chart1.ChartAreas[0].BorderWidth = 2;

            Chart1.Legends.Add("UnitPrice");
            Chart1.Series.Add("UnitPrice");
            //Chart1.Series[0].Palette = ChartColorPalette.Bright;
            Chart1.Series[0].ChartType = System.Windows.Forms.DataVisualization.Charting.SeriesChartType.Line;
            Chart1.Series[0].Points.DataBindXY(dt.DefaultView, "Date", dt.DefaultView, "Data");

            //Chart1.Series[0].IsVisibleInLegend = true;
            Chart1.Series[0].IsValueShownAsLabel = true;
            Chart1.Series[0].ToolTip = "Data Point Y Value: #VALY{G}";

            // Setting Line Width
            Chart1.Series[0].BorderWidth = 3;
            Chart1.Series[0].Color = Color.Red;

            // Setting Line Shadow
            //Chart1.Series[0].ShadowOffset = 5;

            //Legend Properties
            Chart1.Legends[0].LegendStyle = System.Windows.Forms.DataVisualization.Charting.LegendStyle.Table;
            Chart1.Legends[0].TableStyle = System.Windows.Forms.DataVisualization.Charting.LegendTableStyle.Wide;
            Chart1.Legends[0].Docking = System.Windows.Forms.DataVisualization.Charting.Docking.Bottom;
            Chart1.Width = 488;
            Chart1.Height = 345;
        }

谢谢

Answer 1

问题已解决。此行导致问题 Chart1.ChartAreas.Add("chtArea"); 所以我删除了此行。

我的新代码

    private void show()
    {
        DataRow dr = null;
        DataTable dt = new DataTable();
        dt.Columns.Add("Date", typeof(DateTime));
        dt.Columns.Add("data", typeof(Int32));
        dt.Columns.Add("CountryCode", typeof(string));

        dr = dt.NewRow();
        dr[0] = DateTime.Parse("01/01/2017");
        dr[1] = 30;
        dr[2] = "GB";
        dt.Rows.Add(dr);

        dr = dt.NewRow();
        dr[0] = DateTime.Parse("02/01/2017");
        dr[1] = 09;
        dr[2] = "GB";
        dt.Rows.Add(dr);

        dr = dt.NewRow();
        dr[0] = DateTime.Parse("03/01/2017");
        dr[1] = 15;
        dr[2] = "GB";
        dt.Rows.Add(dr);

        dr = dt.NewRow();
        dr[0] = DateTime.Parse("04/01/2017");
        dr[1] = 22;
        dr[2] = "GB";
        dt.Rows.Add(dr);

        dr = dt.NewRow();
        dr[0] = DateTime.Parse("05/01/2017");
        dr[1] = 13;
        dr[2] = "GB";
        dt.Rows.Add(dr);

        dr = dt.NewRow();
        dr[0] = DateTime.Parse("06/01/2017");
        dr[1] = 22;
        dr[2] = "GB";
        dt.Rows.Add(dr);

        dr = dt.NewRow();
        dr[0] = DateTime.Parse("07/01/2017");
        dr[1] = 07;
        dr[2] = "GB";
        dt.Rows.Add(dr);

        dr = dt.NewRow();
        dr[0] = DateTime.Parse("08/01/2017");
        dr[1] = 11;
        dr[2] = "GB";
        dt.Rows.Add(dr);


        //Chart1.BorderSkin.SkinStyle = System.Windows.Forms.DataVisualization.Charting.BorderSkinStyle.Emboss;
        ////Chart1.BorderSkin.SkinStyle = BorderSkinStyle.Emboss;
        //Chart1.BorderlineColor = System.Drawing.Color.FromArgb(26, 59, 105);
        //Chart1.BorderlineWidth = 3;
        //Chart1.BackColor = Color.NavajoWhite;
        //Chart1.ChartAreas.Add("chtArea");
        Chart1.ChartAreas[0].AxisX.Title = "NPS Dates";
        Chart1.ChartAreas[0].AxisX.LabelStyle.Angle = -60;

        Chart1.ChartAreas[0].AxisX.TitleFont = new System.Drawing.Font("Verdana", 11, System.Drawing.FontStyle.Bold);
        Chart1.ChartAreas[0].AxisY.Title = "NPS Values";
        Chart1.ChartAreas[0].AxisY.TitleFont = new System.Drawing.Font("Verdana", 11, System.Drawing.FontStyle.Bold);
        Chart1.ChartAreas[0].BorderDashStyle = System.Windows.Forms.DataVisualization.Charting.ChartDashStyle.Solid;
        Chart1.ChartAreas[0].BorderWidth = 2;

        //Chart1.Legends.Add("UnitPrice");
        //Chart1.Series.Add("UnitPricexxx");
        //Chart1.Series[0].Palette = ChartColorPalette.Bright;
        Chart1.Series[0].ChartType = System.Windows.Forms.DataVisualization.Charting.SeriesChartType.Line;
        Chart1.Series[0].Points.DataBindXY(dt.DefaultView, "Date", dt.DefaultView, "Data");

        //Chart1.Series[0].IsVisibleInLegend = true;
        Chart1.Series[0].IsValueShownAsLabel = true;
        Chart1.Series[0].ToolTip = "Data Point Y Value: #VALY{G}";

        // Setting Line Width
        Chart1.Series[0].BorderWidth = 3;
        Chart1.Series[0].Color = Color.Red;

        // Setting Line Shadow
        //Chart1.Series[0].ShadowOffset = 5;

        //Legend Properties
        Chart1.Legends[0].LegendStyle = System.Windows.Forms.DataVisualization.Charting.LegendStyle.Table;
        Chart1.Legends[0].TableStyle = System.Windows.Forms.DataVisualization.Charting.LegendTableStyle.Wide;
        Chart1.Legends[0].Docking = System.Windows.Forms.DataVisualization.Charting.Docking.Bottom;
        Chart1.Width = 488;
        Chart1.Height = 345;
    }

Answer 2

图表带有一些默认元素，例如图表区域、系列和图例。

如果要创建自己的ChartArea，为什么不先清除默认的ChartArea？ Chart1.ChartAreas.Clear(); 然后（并且只有到那时）您将使用 Chart1.ChartAreas[0] 引用实际访问您新创建的那个。

我还建议对 Series、ChartAreas 等使用简短且命名恰当的引用。:

ChartArea chtArea = Chart1.ChartAreas.Add("chtArea");

Series unitPrice = Chart1.Series.Add("UnitPrice");

这使得代码更加简洁明了..

MSChart：折线图 UI 看起来不正确

MSChart: line chart UI does not look proper

c#

mschart

winforms

查看 UI

代码

我的新代码