如何拖动DataPoint并在Chart控件中移动它

Question

我希望能够抓取图表中绘制的数据点并移动它并通过将其拖动到图表控件上来更改其位置.

我怎么能够 ..

1. ..抓住具体的系列点(系列名称="我的系列")
2. 释放时,系列点应改变其位置/值

这就像使用拖动事件使系列点可移动一样.

这里的颜色点(点)应该能够移动:

有一些图表,如devExpress图表执行此任务,但我想在正常的MS图表中进行.

Answer 1

移动a DataPoint不是Chart控件的内置功能.我们需要编码..

通过鼠标与图表交互的问题在于:在一个工作中没有一个而是三个坐标系统Chart:

• 图表元素,如a Legend或a Annotation,以各个容器的百分比来衡量.这些数据构成一个ElementPosition并且通常来自0-100%.

• 鼠标坐标和在三个Paint事件之一中绘制的所有图形都以像素为单位; 他们来自0-Chart.ClientSize.Width/Height.

• 所述DataPoints具有一个X值和一个(或更多)的y值(一个或多个).这些是双打的,他们可以去往你设置的任何地方.

对于我们的任务,我们需要在鼠标像素和数据值之间进行转换.

请看下面的更新!

有几种方法可以做到这一点,但我认为这是最干净的:

首先,我们创建一些包含目标引用的类级变量:

// variables holding moveable parts:
ChartArea ca_ = null;
Series s_ = null;
DataPoint dp_ = null;
bool synched = false;

当我们设置图表时,我们填写其中一些:

ca_ = chart1.ChartAreas[0];
s_ = chart1.Series[0];

接下来我们需要两个辅助函数.他们在像素和数据值之间进行第一次转换:

    // two helper functions:
    void SyncAllPoints(ChartArea ca, Series s)
    {
        foreach (DataPoint dp in s.Points) SyncAPoint(ca, s, dp);
        synched = true;
    }

    void SyncAPoint(ChartArea ca, Series s, DataPoint dp)
    {
        float mh = dp.MarkerSize / 2f;
        float px = (float)ca.AxisX.ValueToPixelPosition(dp.XValue);
        float py = (float)ca.AxisY.ValueToPixelPosition(dp.YValues[0]);
        dp.Tag = (new RectangleF(px - mh, py - mh, dp.MarkerSize, dp.MarkerSize));
    }

请注意,我选择使用Tag每个DataPoints来保存RectangleF具有DataPoint标记的clientRectangle .

每当图表调整大小或布局中的其他更改(如图例等的大小调整等)发生时,这些矩形都会发生变化,因此我们需要每次重新同步它们!而且,当然你需要在添加时初始设置它们!DataPoint

这是Resize事件:

private void chart1_Resize(object sender, EventArgs e)
{
    synched = false;
}

PrePaint事件触发了矩形的实际刷新:

private void chart1_PrePaint(object sender, ChartPaintEventArgs e)
{
    if ( !synched) SyncAllPoints(ca_, s_);
}

请注意,调用的ValueToPixelPosition是并不总是有效!如果你在错误的时间调用它,它将返回null ..我们从PrePaint事件中调用它,这很好.国旗将有助于保持高效.

现在实际移动一个点:像往常一样,我们需要编写三个鼠标事件的代码:

在MouseDown我们循环遍历Points集合,直到我们找到一个Tag包含鼠标位置的集合.然后我们存储它并改变它的颜色..:

private void chart1_MouseDown(object sender, MouseEventArgs e)
{
    foreach (DataPoint dp in s_.Points)
        if (((RectangleF)dp.Tag).Contains(e.Location))
        {
            dp.Color = Color.Orange;
            dp_ = dp;
            break;
        }
}

在MouseMove我们做反向计算并设置我们的点的值; 请注意,我们还会同步其新位置并触发Chart刷新显示:

private void chart1_MouseMove(object sender, MouseEventArgs e)
{
    if (e.Button.HasFlag(MouseButtons.Left) && dp_ != null)
    {
        float mh = dp_.MarkerSize / 2f;
        double vx = ca_.AxisX.PixelPositionToValue(e.Location.X);
        double vy = ca_.AxisY.PixelPositionToValue(e.Location.Y);

        dp_.SetValueXY(vx, vy);
        SyncAPoint(ca_, s_, dp_);
        chart1.Invalidate();
    }
   else
   {
       Cursor = Cursors.Default;
       foreach (DataPoint dp in s_.Points)
          if (((RectangleF)dp.Tag).Contains(e.Location))
          {
             Cursor = Cursors.Hand; break;
          }
   }
}

最后我们在MouseUp事件中清理:

    private void chart1_MouseUp(object sender, MouseEventArgs e)
    {
        if (dp_ != null)
        {
            dp_.Color = s_.Color;
            dp_ = null;
        }
    }

以下是我设置图表的方法:

Series S1 = chart1.Series[0];
ChartArea CA = chart1.ChartAreas[0];
S1.ChartType = SeriesChartType.Point;
S1.MarkerSize = 8;
S1.Points.AddXY(1, 1);
S1.Points.AddXY(2, 7);
S1.Points.AddXY(3, 2);
S1.Points.AddXY(4, 9);
S1.Points.AddXY(5, 19);
S1.Points.AddXY(6, 9);

S1.ToolTip = "(#VALX{0.##} / #VALY{0.##})";

S1.Color = Color.SeaGreen;

CA.AxisX.Minimum = S1.Points.Select(x => x.XValue).Min();
CA.AxisX.Maximum = S1.Points.Select(x => x.XValue).Max() + 1;
CA.AxisY.Minimum = S1.Points.Select(x => x.YValues[0]).Min();
CA.AxisY.Maximum = S1.Points.Select(x => x.YValues[0]).Max() + 1;
CA.AxisX.Interval = 1;
CA.AxisY.Interval = 1;

ca_ = chart1.ChartAreas[0];
s_ = chart1.Series[0];

请注意,我已经设置两个Minima和Maxima还有Intervals两个Axes.这将停止Chart从它的自动显示猖獗Labels,GridLines,TickMarks等.

另请注意,这适用于任何DataTypeX和Y值.只需Tooltip格式化格式..

最后说明一点:为了防止用户移动DataPoint关闭ChartArea您可以添加这个检查到if-clause的的MouseMove事件:

  RectangleF ippRect = InnerPlotPositionClientRectangle(chart1, ca_);
  if (!ippRect.Contains(e.Location) ) return;

有关InnerPlotPositionClientRectangle功能,请看这里!

更新:

在重新访问代码时,我想知道为什么我没有选择更简单的方法:

DataPoint curPoint = null;

private void chart1_MouseUp(object sender, MouseEventArgs e)
{
    curPoint = null;
}

private void chart1_MouseMove(object sender, MouseEventArgs e)
{
    if (e.Button.HasFlag(MouseButtons.Left))
    {
        ChartArea ca = chart1.ChartAreas[0];
        Axis ax = ca.AxisX;
        Axis ay = ca.AxisY;

        HitTestResult hit = chart1.HitTest(e.X, e.Y);
        if (hit.PointIndex >= 0) curPoint = hit.Series.Points[hit.PointIndex];

        if (curPoint != null)
        {
            Series s = hit.Series;
            double dx = ax.PixelPositionToValue(e.X);
            double dy = ay.PixelPositionToValue(e.Y);

            curPoint.XValue = dx;
            curPoint.YValues[0] = dy;
        }
}