Let's briefly talk about it. From the figure, you can see that a chart can draw multiple ChartAreas, and each ChartArea can draw multiple Series. ChartArea is the drawing area. There can be multiple ChartAreas superimposed on each other. Series is drawn on ChartAarea. Series means "sequence, continuous" in English. , Pie chart... It can be noted that when there is a lot of data in this chart, you can select the viewing area with the mouse, and further drag the horizontal and vertical scroll bars to zoom out the graph view.
The name of the Chart control in the code is chartData, and the data source is dt. Since there are too many chart attributes, it is difficult to explain them one by one, so please look at the screenshots carefully, and pay special attention to the attributes used in this example.
1. Data source:
The data return method is DataSet.Tables[0], namely DataTable, which is also the most basic data source method. Only the DataTable binding data source is introduced here, which is very simple:
chartData.DataSource = dt;
chartData.DataBind();
2. Series:
Series is a line, point, column, bar, and pie chart drawn on the ChartArea. Simply speaking, it is the data drawn on it, directly speaking of attributes.
1. "Marker": A data point, a point of a data value. As shown below:
MarkerBorderColor The color of the border of the data point
MarkerBorderWidth data point border width
MarkColor The color
of the data point MakerSize The size of the data point, the default value is 0 The data point does not exist, it is recommended to control the code
Frequency at which MarkerStep data points are displayed
MarkerStyle The style of the data point, which can be square, circle, triangle, fork....
2. "label": the data value that is now next to the data point
IsValueShownAsLabel Whether the data value is displayed, it is recommended to control the code
SmartLabelStyle data value style
SmartLabelStyle.Enabled Direct control is available or unavailable, it is recommended not to be available
SmartLabelStyle.AllowOutsidePloArea data value shows whether outside is allowed
Try other properties
Note: If you want to use SmartLabelStyle, the values of all data points will be automatically displayed at the location. If there are many data points in a certain area, it will be indicated by a straight line; if not, the values of the data points will be displayed next to the data points. There will be no straight lines. The difference between AllowOutsidePlotArea can also be seen as shown in the following figure:
3. "Font": the font and style on the data label
Font tag font settings
It’s so beautiful. When there is a lot of
data , the display will be drawn randomly, which is even more superfluous. It is recommended to be transparent, and the color of the normal point will be fine.
3. Blank point: It is continuous data. For example, there is no data for the X-axis corresponding to the Y-axis, or no data for the Y-axis corresponding to the X-axis. Such data points can be set with corresponding attributes. Most of the attributes are as mentioned above. Try it yourself all at once
4. Data: In fact, it is the name and value type of the serie
Name is the only name
XvalueType X-axis value type
YValuesPerPoint the number of Y values of the data point
YValueType Y-axis value type
Try other properties
By default, you don't need to set it. The main thing is that the X-axis and Y-axis value types are set to Auto, which means that the value on the X-axis and the type of the value on the Y-axis are automatically matched. Of course, if you set it manually, you can set it correctly.
5. Data source: Note that this is the data source of the Series
Note:
First, these two attributes correspond to the two columns of the DataTable, that is, the general X-axis corresponds to time, and the Y-axis corresponds to the data value, but you should also pay attention to the value of each data unit of the DataTable to judge, especially is DBNull or empty. The NewDateTime column data type of my database here is DateTime type, and NewFyj is Double type.
Second, the data source of the Series is different from the data source of the Chart control. Only if the DataTable is bound to the Chart first, the Series corresponds to the column, otherwise it cannot correspond.
Third, if the user needs to view all the data first, and then cancel some of the data for data comparison, but does not need to re-query the data, it is recommended to assign string.Empty implementation, as shown below:
6. Chart: That is, on which ChartArea the Serie is drawn, ChartType is the chart type of the Serie, that is, what kind of graph to draw, such as a curve graph, a straight line graph, a point, a bar graph, a pie graph, etc...
7. Legend: That is, the name and style of each Serie. As long as the Serie is created, it will be automatically generated and loaded into the Legend. You can try the properties inside. If you want to adjust the position of the Legend, you can go to the Legend collection and set it. It is relatively simple. Not much to say here
8. Charts
9. Mapping area: a small prompt that appears when the mouse is placed on a data point, it is recommended to use code to control
10. Miscellaneous
EmptyPointValue The value of the empty data point is averaged or zeroed
LabelStyle specifies where the label is displayed next to the data point
11. Axis: that is, the X axis and the Y axis. The X axis has a main axis and a secondary axis, and the Y axis also has a main axis and a secondary axis. The primary axis is Primary, and the secondary axis is Secondary. The X main axis is below, the Y main axis is on the right, the X secondary axis is above, and the Y secondary axis is on the right.
3. ChartAreas:
The most important thing in the Chart control, each Serie is drawn on the ChartArea, and the Chart control can have multiple ChartAreas superimposed and displayed together. For example, the first ChartArea draws a curve, the second draws a histogram or something. This is also the ChartType of the Serie mentioned above. We can also draw multiple Serie on one ChartArea, but if there is a column The data with the data unit range of 500~10000 floats the most. There is a column of data units with a range of 0.1 to 2.0, and a column of data units with a range of 50 to 100. If they are displayed on the same ChartArea, 0.1 to 2.0 data will become a straight line. When there are only 1 or 2 pieces of such data, the main axis and sub-axis can be set in the Serie, but when there are multiple pieces of data and multiple types of display, multiple ChartAreas are needed to solve it. Since there are too many attributes, I will introduce the key attributes and try the other attributes by yourself.
1. Alignment: ChartArea alignment
AlignmentOrientation Horizontal alignment, vertical alignment, all alignment
AlignmentStyle according to which way to align
AlignmentWithChartArea and which alignment
To be honest, it's useless, you can set the Position, which will be mentioned in the appearance later
2. 3D: try it yourself, the effect is very heavy, not very good
3. Appearance: You can set the ChartArea color, border, and position
BackColor ChartArea's background color
BackGradientStyle The gradient of the background color
BackHatchStyle background shadow
BackImage background image
BackImageAlignment image display position
BackImageTransparentColor The color to display when drawing the image
BackImageWrapMode wrapping mode
BackSecondaryColor ChartArea's second background color, used with gradients
BorderColor border color
BorderDashStyle style of border line
BorderWidth border width
ShadowColor The background color of the entire icon
ShadowOffset shadow offset
Notice:
First, one of InnerPlotPosition and Position is large, and the other is drawn internally. Try it and you will understand. The most important thing here is that when multiple ChartAreas overlap, the two Positions must be set to the same, otherwise they will not overlap. .
Second, when multiple ChartAreas are overlapped, the color or image can only be set on the bottom ChartArea. The top ChartArea can be set to be transparent. The bottom ChartArea is ChartAreas[0], so don't set it. wrong.
4. Cursor: CursorX and CursorY, which are horizontal and vertical scroll bars
CursorX.AutoScroll scroll bar automatically scrolls
CursorX.AxisType The cursor acts on the main axis or the secondary axis
CursorX.Interval Cursor offset interval
CursorX.IntervalOffset cursor interval offset
CursorX.IntervalOffsetType unit of cursor interval, recommended Auto
CursorX.Type unit of cursor interval offset, recommended Auto
CursorX.IsUserEnabled enables cursors
CursorX.IsUserSelectedEnabled Enable cursor selection area
CursorX.LineColor cursor line color
CursorX.LineDashStyle cursor line style
CursorX.LineWidth width of the cursor line
CursorX.SelectionColor The color of the cursor selection area
CursorY is the same, try other attributes by yourself
First of all, it is emphasized that as long as you want to select an area to look at the graph, you must enable the cursor. The cursor setting can only be set in the ChartArea superimposed on the top, that is, ChartArea[ChartArea.Count-1]. With so many properties listed, it is more intuitive to look at the diagram:
There are cursors on the X-axis and Y-axis, which can be dragged. You can notice that there is a button with a circle on it, which is to go back. The blue rectangle in the picture is the area selected by the user. Release the mouse and it will change to this area. graphics.
5. Miscellaneous: Name, nothing to say
6. Axis Axes! ! : Very important, a ChartArea has 4 axes: the main axis X axis, the main axis Y (Value) axis, the secondary axis X axis, the secondary axis Y (Value) axis, the attributes of each axis are the same, only one axis is said
IsLabelAutoFit Labels on the axis are automatically adjusted
LabelAutoFitMaxFontSize Axis label adaptive font large
LabelAutoFitMaxFontSize Axis label adaptive font small
LabelStyle.Angle Label display angle
LabelStyle.IsEndLabelVisible whether the last label is displayed
Try other properties
My Interval settings are NotSet here, and Auto is not set. Why, try it yourself to understand.
TextOrientation axis title orientation
The name of the Title axis, the X axis is the time axis, and the Title is the time
Try other properties yourself, simple
Whether the IntervalAutoMode interval is a fixed value or changes with the axis, try it yourself
The ScaleView data view is the currently drawn and expanded graph! important!
MinSizeType cursor scroll type
ScrollBar scroll bar
ScaleView is a data view, that is, an area where the chart is currently drawn. If you select an area with the mouse to expand and display, the newly expanded is another ScaleView. It is easy to understand if you just think of it as the currently displayed view.
ScrollBar is a cursor. The ChartArea.CursorX or Y we mentioned before is also a cursor. The ScrollBar here is a scroll bar. It is not difficult to find the properties of the two. One is the selection area, and the other is to drag the scroll bar to view all the data.
These attributes are not the point, try it yourself, it is the appearance design
Not much to say, you need to set the grid here, it feels ugly after the setting is completed, but each one has an eye, as shown in the figure below, it is not bad.
Do n't
forget, let's stay in ChartArea.Axis, this is only one axis, don't forget to set other axes if you need it
reprint