After a preliminary study, the entire graphic control consists of the following parts:
1. Annotations -- a set of graphical annotations
2. chartareas-chart area set
3. Legends-legend set
4. Series -- a sequence set of charts (that is, a set of chart data objects)
5. Titles -- the title set of the icon
Annotations annotation set
Annotations is a set of graphic annotation objects. The so-called annotation objects are similar to the detailed or annotated description of a certain vertex. For example, key information of each node is implemented on the image, for example, the box and the yellow small box:
A single image can have multiple annotation objects, and can add annotation objects of more than a dozen graphic styles, including common arrows, clouds, moments, images, and other annotation symbols, through the attributes of each annotation object, you can easily set the location, color, size, text content style, and other common attributes of the annotation object.
Chartareas chart area set
Chartareas can be understood as a drawing area of a chart. For example, if you want to display two different attributes in a chart, one is user traffic, and the other is system resource usage, it is obviously unreasonable for you to plot the two situations in one graph. In this case, you can create two chartarea and one for displaying user traffic, the other is used to display the usage of system resources.
Of course, the chart control does not limit how many drawing areas you can add as needed. For each drawing area, you can set its own attributes, such as X, Y axis, and background.
It should be noted that the drawing area is only a range of areas that can be drawn, and it does not contain various attribute data for drawing.
The multi-drawing area is as follows, which is divided into upper and lower drawing areas, indicating different drawing data respectively:
Legends legend set
Legends is a collection of legends, indicating the meaning of each line or color in the image. Likewise, an image can contain multiple legends, for example, if you want to create multiple legends for multiple chart regions, you can create multiple legends, for more information, see the examples on the official website ~
Series chart Sequence
The chart sequence should be the most important content in the whole drawing. In layman's terms, it is the actual drawing data area. The actual graphic shape is formed by each chart in the set, you can add multiple charts to the set. Each chart can have its own shape, style, and independent data.
Note that for each chart, you can specify the chart area (see the chartareas description) so that the chart is displayed in a certain drawing area, you can also overlay several charts in the same drawing area, for example:
The two charts above indicate that the chart is placed in different areas and in the same area.
Go back to the example in chartareas, and display the user's traffic and the system's usage. In this case, we should create two series to present the user's traffic, the other is used to present the usage of the system. They belong to their respective drawing areas.
Titles title collection
It can be understood by literal meaning. It is the title configuration of the chart. You can also add multiple titles and set attributes such as the style, text, and position of the title. By looking at its attributes, you can understand their meanings.
Series attributes
1. Label
That is, the meaning of a tag. You can describe key numbers or words in the key position of an image, such:
For example, the text on the X axis and Y axis is a label, and the text on the red dot in the chart curve is also a label. Adding labels makes it easier to understand the content.
2. tooltip
That is, the meaning of the prompt, used in each key point, such as labels, graphics key points, titles, etc. When the mouse moves up, it prompts the user with relevant details or instructions, for example, you can add the tooltip attribute to each vertex in the curve and write the content to be described in detail, for example, the detailed sales details. When you move the cursor to this vertex, A prompt is displayed.
Tooltip supports Simple and custom methods. A simple method is an attribute effect, such as the title set on an HTML page, you can display complex prompts such as graphics and text. For more information, see the following official examples: interactivity and Ajax/tooltips and interactivity and Ajax/client side scripts.
3. URL link
In the chart control, most of the controls have the URL and tooltip attributes. You can set this attribute to represent other corresponding pages when you click the mouse.
4. Points attributes