C # WinForm Development Series chart controls draw line and column charts and customize mouse movements to data marker points display tips

Original from http://blog.csdn.net/dannyiscoder/article/details/70768230

1. First drag the chart control to the form and set the default Legend1 in the Chart1 property legends to false;

2. Set the series ChartType as Line

3. Background binding Data

list<string> xData = new list<string> () {"A", "B", "C", "D"};
list<int> ydata = new list<int> () {10, 20, 30, 40};
Chart1. series[0]["Pielabelstyle"] = "Outside";//move text to the outer side
Chart1. series[0]["Pielinecolor"] = "BLACK";//Draw a dark line.
Chart1. Series[0]. POINTS.DATABINDXY (XData, ydata);

The information prompted by the 4.chant control is ToolTip (map area), as shown in Figure 1:

Figure 1

5. In form loading, you can define the prompts that you want to display by following code:

private void Form3_load (object sender, EventArgs e)
{
list<string> xData = new list<string> () {"1", "2", "3", "4"};
list<int> ydata = new list<int> () {10, 20, 30, 40};
Line Color
Chart1. Series[0]. Color = Color.green;
Line weight
Chart1. Series[0]. BorderWidth = 2;
Marker Point Border color
Chart1. Series[0]. Markerbordercolor = Color.Blue;
Marker Point Border size
Chart1. Series[0]. Markerborderwidth = 3; chart1.;/ /Xaxis
Marker Point Center Color
Chart1. Series[0]. Markercolor = Color.white;//axiscolor
Marker point Size
Chart1. Series[0]. Markersize = 8;
Marker Point Type
Chart1. Series[0]. MarkerStyle = markerstyle.circle;

Information that needs to be prompted
Chart1. Series[0]. ToolTip = "Current year: #VAL \ n Highest score: #MAX \ n Lowest score: #Min";


Move text to the outer side
Chart1. series[0]["Pielabelstyle"] = "Outside";
Draw a black connection
Chart1. series[0]["Pielinecolor"] = "BLACK";
Chart1. Series[0]. POINTS.DATABINDXY (XData, ydata);
}

6. The results are shown in Figure 2, 3:

Figure 2

Figure 3

Note: In order to customize the style of the hint information, I have defined a prompt box by myself, which is shown by the following methods

7. On the form form, draw a prompt box (combining three labels with two panel), as shown in Figure 4:

Figure 4

8. Use the ToolTip event for the chart control, as shown in Figure 5:

Figure 5

9. (1) The initial form method hides the custom hint message, the code is as follows:

Public Form3 ()
{
InitializeComponent ();
This.panel1.Visible = false;
}

(2) In the form load method binding mouse Hover ToolTip event, the code is as follows:

private void Form3_load (object sender, EventArgs e)
{
Hover Tool Tip Event
Chart1. Gettooltiptext + = new eventhandler<tooltipeventargs> (chart1_gettooltiptext);

list<string> xData = new list<string> () {"1", "2", "3", "4"};
list<int> ydata = new list<int> () {10, 20, 30, 40};
Line Color
Chart1. Series[0]. Color = Color.green;
Line weight
Chart1. Series[0]. BorderWidth = 2;
Marker Point Border color
Chart1. Series[0]. Markerbordercolor = Color.Blue;
Marker Point Border size
Chart1. Series[0]. Markerborderwidth = 3; chart1.;/ /Xaxis
Marker Point Center Color
Chart1. Series[0]. Markercolor = Color.white;//axiscolor
Marker point Size
Chart1. Series[0]. Markersize = 8;
Marker Point Type
Chart1. Series[0]. MarkerStyle = markerstyle.circle;//markerstyle.circle;
Move text to the outer side
Chart1. series[0]["Pielabelstyle"] = "Outside";
Draw a black connection
Chart1. series[0]["Pielinecolor"] = "BLACK";
Chart1. Series[0]. POINTS.DATABINDXY (XData, ydata);
}

(3) The hover tool Tip event method is the following code:

Giving the processing method in the Concrete event processing function
* * With Chart MouseMove time, real-time tracking the mouse the nearest X axis position, and then set the Cursorx to that position,

Let the user know the value of the x that I chose, and use ToolTip to display all Y values on the x axis.
void Chart1_gettooltiptext (object sender, Tooltipeventargs e)
{

To determine whether the mouse is moved to a data marker point, the prompt is displayed
if (E.hittestresult.chartelementtype = = Chartelementtype.datapoint)
{
int i = E.hittestresult.pointindex;
DataPoint DP = e.hittestresult.series.points[i];
Displays the values for both the X and Y axes, where {1:f3}, which indicates float type, is accurate to 3 digits after the decimal point.
String r = String. Format (number: {0}; Value: {1}), DP. Xvalue, DP. Yvalues[0]);

The coordinates of the mouse relative to the upper-left corner of the form
Point formpoint = this. PointToClient (control.mouseposition);
int x = formpoint.x;
int y = Formpoint.y;
Show Tips
This.panel1.Visible = true;
This.panel1.Location = new Point (x, y);
This.label3.Text = R;
}

The mouse leaves the data marker point, hide the hint information
else {
This.panel1.Visible = false;
}
}

7. When the mouse moves to different data marker points is the hint effect as shown in Figure 6, 7:

Figure 6

Figure 7