← 返回所有博客文章

什么是十字准线光标?

一条十字准线光标是在窗体上简单的呈现水平和竖直交叉线。

它的相互点定义鼠标和值。

在图表上十字准线光标的需求

十字准线光标在图表上市基础功能之一,它能在图表上展示一定范围内的数据。有了这个数据,就能精确的衡量图表。

然而,绘制十字准线光标需要准确的位置,比如数据点的X和Y值。

图表十字准线的交互

图表上有两组。绘制图表一般只使用Group0,而留着Group1不用。然而Group1有其他的用途,比如展示动态图表,根据鼠标的移动而移动,它的绘制方式就是十字准线。

有两件基本的事情需要考虑完成:

绘制十字准线实现的Group0数据

绘制图表的Group0包括给Chart添加序列,绘制X和Y值。

   1:  //Add Series
   2:  c1Chart1.ChartGroups[1].ChartData.SeriesList.AddNewSeries();
   3:  c1Chart1.ChartGroups[1].ChartData.SeriesList.AddNewSeries();
   4:  c1Chart1.ChartGroups[1].ChartData.SeriesList.AddNewSeries();
   5:  c1Chart1.ChartGroups[1].ChartData.SeriesList.AddNewSeries();
   6:  c1Chart1.ChartGroups[1].ChartData.SeriesList.AddNewSeries();
   7:   
   8:  //Populate X Values
   9:  c1Chart1.ChartGroups[1].ChartData.SeriesList[0].AutoEnumerate = true;
  10:  c1Chart1.ChartGroups[1].ChartData.SeriesList[1].AutoEnumerate = true;
  11:  c1Chart1.ChartGroups[1].ChartData.SeriesList[2].AutoEnumerate = true;
  12:  c1Chart1.ChartGroups[1].ChartData.SeriesList[3].AutoEnumerate = true;
  13:  c1Chart1.ChartGroups[1].ChartData.SeriesList[4].AutoEnumerate = true;
  14:   
  15:  //Populate Y Values
  16:  c1Chart1.ChartGroups[1].ChartData.SeriesList[0].Y.CopyDataIn(new double[] { 12, 19, 15, 31, 44, 17 });
  17:  c1Chart1.ChartGroups[1].ChartData.SeriesList[1].Y.CopyDataIn(new double[] { 22, 14, 27, 35, 51, 22 });
  18:  c1Chart1.ChartGroups[1].ChartData.SeriesList[2].Y.CopyDataIn(new double[] { 16, 17, 22, 33, 20, 33 });
  19:  c1Chart1.ChartGroups[1].ChartData.SeriesList[3].Y.CopyDataIn(new double[] { 21, 12, 13, 16, 17, 51 });
  20:  c1Chart1.ChartGroups[1].ChartData.SeriesList[4].Y.CopyDataIn(new double[] { 11, 41, 25, 13, 24, 11 });

在展示十字准线中绘制动态线

通过MouseMove事件用来在Group1绘制动态线.

当鼠标移动的时候,图表的数据Group1会被清除和重新计算。这个数据是和鼠标值同步的。

   1:  void c1Chart1_MouseMove(object sender, MouseEventArgs e)
   2:  {
   3:  x = e.X;
   4:  y = e.Y;
   5:  float X = 0f, Y = 0f;
   6:   
   7:  //Add series
   8:  c1Chart1.ChartGroups[0].ChartData.SeriesList.Clear();
   9:  c1Chart1.ChartGroups[0].ChartData.SeriesList.AddNewSeries();
  10:  c1Chart1.ChartGroups[0].ChartData.SeriesList.AddNewSeries();
  11:   
  12:  //Populate the series with X and Y Values
  13:  c1Chart1.ChartGroups[0].CoordToDataCoord(x, y, ref X, ref Y);
  14:  double[] xSerHorz = new double[3] { (double)c1Chart1.ChartArea.AxisX.Min, (double)X, (double)c1Chart1.ChartArea.AxisX.Max };
  15:  double[] ySerHorz = new double[3] { (double)Y, (double)Y, (double)Y };
  16:  double[] xSerVert = new double[3] { (double)X, (double)X, (double)X };
  17:  double[] ySerVert = new double[3] { (double)c1Chart1.ChartArea.AxisY.Min, (double)Y, (double)c1Chart1.ChartArea.AxisY.Max };
  18:  c1Chart1.ChartGroups[0].ChartData.SeriesList[0].X.CopyDataIn(xSerHorz);
  19:  c1Chart1.ChartGroups[0].ChartData.SeriesList[0].Y.CopyDataIn(ySerHorz);
  20:  c1Chart1.ChartGroups[0].ChartData.SeriesList[1].X.CopyDataIn(xSerVert);
  21:  c1Chart1.ChartGroups[0].ChartData.SeriesList[1].Y.CopyDataIn(ySerVert);
  22:   
  23:  //Style the Series
  24:  c1Chart1.ChartGroups[0].ChartData.SeriesList[0].SymbolStyle.Shape = C1.Win.C1Chart.SymbolShapeEnum.DiagCross;
  25:  c1Chart1.ChartGroups[0].ChartData.SeriesList[0].SymbolStyle.Color = Color.Orange;
  26:  c1Chart1.ChartGroups[0].ChartData.SeriesList[0].SymbolStyle.OutlineColor = Color.Orange;
  27:  c1Chart1.ChartGroups[0].ChartData.SeriesList[0].SymbolStyle.Size = 3;
  28:  c1Chart1.ChartGroups[0].ChartData.SeriesList[0].LineStyle.Color = Color.Red;
  29:  c1Chart1.ChartGroups[0].ChartData.SeriesList[0].LineStyle.Thickness = 2;
  30:   
  31:  c1Chart1.ChartGroups[0].ChartData.SeriesList[1].SymbolStyle.Shape = C1.Win.C1Chart.SymbolShapeEnum.DiagCross;
  32:  c1Chart1.ChartGroups[0].ChartData.SeriesList[1].SymbolStyle.Color = Color.Orange;
  33:  c1Chart1.ChartGroups[0].ChartData.SeriesList[1].SymbolStyle.OutlineColor = Color.Orange;
  34:  c1Chart1.ChartGroups[0].ChartData.SeriesList[1].SymbolStyle.Size = 3;
  35:  c1Chart1.ChartGroups[0].ChartData.SeriesList[1].LineStyle.Color = Color.Red;
  36:  c1Chart1.ChartGroups[0].ChartData.SeriesList[1].LineStyle.Thickness = 2;
  37:   
  38:  c1Chart1.ToolTip.Enabled = true;
  39:  c1Chart1.Visible = true;
  40:   
  41:  //Attach a Chart Label with the Coordinate to display the value of the point under the cross-hair cursor
  42:  c1Chart1.ChartLabels.LabelsCollection.AddNewLabel();
  43:  c1Chart1.ChartLabels.LabelsCollection[0].AttachMethod = C1.Win.C1Chart.AttachMethodEnum.Coordinate;
  44:  c1Chart1.ChartLabels.LabelsCollection[0].AttachMethodData.X = x;
  45:  c1Chart1.ChartLabels.LabelsCollection[0].AttachMethodData.Y = y - 8;
  46:  c1Chart1.ChartLabels.LabelsCollection[0].Text = "X= " + X.ToString() + ", Y= " + Y.ToString();
  47:  c1Chart1.ChartLabels.LabelsCollection[0].Visible = true;
  48:  c1Chart1.ChartLabels.DefaultLabelStyle.BackColor = Color.Red;
  49:   
  50:  }

 

因此就可以在图表中展示十字准线。

本文的示例参考:

 

资源

如果你对C1Chart感兴趣,请到我们的官网下载最新版本:/developer/componentone-winform/controls/chart

如果你有疑问,可以到GCDN论坛获得技术支持:http://gcdn.grapecity.com.cn/showforum-68.html