如何在 Winforms C# 中在图表上绘制点和线

Question

我需要制作一个程序，用 Winforms 在笛卡尔平面上画一条线。我的数据输入方法是在标记为

X

和 Y 的 TextBox 控件中输入坐标，但我的问题一般是关于表示图表上的点并将它们连接起来画一条线。

Answer 1

使用

System.Windows.Forms.DataVisualization.Charting

是实现此目的的一种方法。我使用了它的生产代码，发现它功能丰富且强大。

对于 .Net Core，可以将

System.Windows.Forms.DataVisualization

安装为 NuGet 预发布 版本（以及

System.Data.SqlClient

作为依赖项）或 移植它的第 3 方衍生产品之一。 搜索 NuGets 时，请确保选中 [x] Include Prerelease 框。我使用 .Net Core 3 (clone) 和 .Net Core 6 (clone) 测试了这个答案。如果您仍在使用 .NET Framework，它已经是内置的，不需要外部包。 （我用过很多的那个版本。）

我整理了一个图表的基本示例，每次单击鼠标都会在十字准线处添加一个点，并在双击时清除所有点。要回答您提出的问题，即如何用文本框画一条线，只需查看代码中将点添加到系列中的位置，并使用文本框中的值执行相同的操作。

---

MainForm CTOR

A

Panel

已放置在

MainForm

上以包含在

Chart

CTor 中设置的

MainForm

。

Crossing

属性设置为 0，以便 X-Y 居中。

IsMarksNextToAxis

属性设置为

false

以将标签放在侧面和底部。将这些设置为

true

会让它看起来更像您的帖子。

public MainForm()
{
    InitializeComponent();
    _chart = new Chart{ Dock = DockStyle.Fill, };
    _series = new Series
    {
        Name = "Series1",
        Color = Color.Green,
        IsVisibleInLegend = false,
        IsXValueIndexed = false,
        ChartType = SeriesChartType.Line,
        BorderWidth = 2, // In a line chart, this is the width of the line.
    };
    _series.Points.Add(new DataPoint { IsEmpty = true });

    _chartArea = new ChartArea
    {
        AxisX =
        {
            Minimum = -10,
            Maximum = 10,
            Interval = 1,
            IsMarksNextToAxis = false,
            IsLabelAutoFit = false,
            Crossing = 0,
            LineWidth = 1,
            MajorGrid = {  Interval = 1, LineColor = Color.LightBlue, LineWidth = 1 },
            Enabled = AxisEnabled.True,
        },
        AxisY =
        {
            Minimum = -10,
            Maximum = 10,
            Interval = 1,
            IsMarksNextToAxis = false,
            IsLabelAutoFit = false,
            Crossing = 0,
            LineWidth = 1,
            MajorGrid = {  Interval = 1, LineColor = Color.LightBlue, LineWidth = 1 },
            Enabled = AxisEnabled.True,
        },
    };

    _chart.ChartAreas.Add(_chartArea);
    _series.MarkerStyle = MarkerStyle.Cross;
    _chart.Series.Add(_series);

    _chartArea.CursorX.LineColor = Color.LightCoral;
    _chartArea.CursorX.Interval = 0.01;
    _chartArea.CursorX.IsUserEnabled = true;

    _chartArea.CursorY.LineColor = Color.LightCoral;
    _chartArea.CursorY.Interval = 0.01;
    _chartArea.CursorY.IsUserEnabled = true;

    panel.Controls.Add(_chart);
    #if false
    // Draw diagonal
    for (int i = -10; i <= 10; i++)
    {
        _series.Points.AddXY(i, i);
    }
    #endif
    _chart.MouseClick += onChartClick;
    _chart.MouseDoubleClick += onChartDoubleClick;
    _chart.MouseMove += onChartMouseMove;
}

---

活动

使用光标位置向系列添加新点。

private void onChartClick(object sender, MouseEventArgs e)
{
    _series.Points.AddXY(_chartArea.CursorX.Position, _chartArea.CursorY.Position);
}

双击清除系列。

private void onChartDoubleClick(object sender, MouseEventArgs e)
{
    _series.Points.Clear();
    _series.Points.Add(new DataPoint { IsEmpty = true });
}

移动十字线：

private void onChartMouseMove(object sender, MouseEventArgs e)
{
    _chartArea.CursorX.SetCursorPixelPosition(e.Location, true);
    _chartArea.CursorY.SetCursorPixelPosition(e.Location, true);
}

---

NuGets