Highcharts data representation (2) and highcharts Data Representation
Highcharts data representation (2)
A data node is the smallest element in a chart. Each data node is a data unit. It determines the information of a graphic element in a chart. A data node usually includes the following three types of information:
1. Coordinate Position Information
Most of the charts in Highcharts are 2D in a plane, so each node needs the corresponding coordinate information (x, y ). In Highcarts, coordinate information is defined by configuration items x and y. The syntax format is as follows:
- X: Number | String
- Y: Number
The value of configuration item x can be a number or a string, and configuration item y must be a number.
2. Other required information
In addition to coordinate information, many charts require additional information from nodes, such as the bar color and bubble size. This information is also defined in the data node. For example, for a column chart node, you must use the color configuration item to specify the color of the bar corresponding to the node. The syntax is as follows:
The Color parameter specifies the fill Color of the column.
3. User supplementary information
Sometimes, the user supplements the node information. In this case, you need to create your own configuration items and assign values. The node information can be displayed in the prompt box and data label. For example, in the first example of this book, you can add configuration items for each node to store the maximum temperature occurrence time. The format is as follows:
- Hightemtime: Number | String | Object
The configuration item name hightemtime is defined by the user, and the value type is also specified by the user.
After learning the information contained in a node, we can define all the information as follows:
- {
- X: Number | String,
- Y: Number,
- Color: Color,
- Hightemtime: Number | String | Object
- }
Each node is such an object. The nodes in the entire data column constitute an array of objects in the following format:
- Data :[{
- X: Number | String,
- Y: Number,
- Color: Color,
- Hightemtime: Number | String | Object
- },{
- X: Number | String,
- Y: Number,
- Color: Color,
- Hightemtime: Number | String | Object
- },
- ......
- {
- X: Number | String,
- Y: Number,
- Color: Color,
- Hightemtime: Number | String | Object
- }]
PS: This content has been added to webpage chart Highcharts practice tutorial basics v1.2.5.
Copyright Disclaimer: This article is an original article by the blogger and cannot be reproduced without the permission of the blogger.
