Highcharts Study website 1:http://www.hcharts.cn/docs/index.php?doc=basic (Baidu highcharts Chinese course)
Highcharts Learning URL 2:http://www.helloweba.com/view-blog-156.html (highcharts option configuration details document )
By the way, share the content of the URL 2:
Highcharts provides a number of options configuration parameters, you can easily customize to meet user requirements of the chart, the official website is only available in the English version of the development configuration documentation, and the Chinese version of the document online very little, and fragmented. Here, I have highcharts the most common parameters of the most important parameter options to organize into documents, to share with you.
Chart: Plot Area options
The chart plot area option is used to set the chart area related properties.
Parameters |
Describe |
Default value |
BackgroundColor |
Set the chart area background color |
#FFFFFF |
BorderWidth |
Set chart Border width |
0 |
Borderradius |
Set chart Border Fillet angle |
5 |
Renderto |
The container that the chart is placed in, typically places a div in the HTML, gets the value of the div's id attribute |
Null |
Defaultseriestype |
Default chart type line, spline, area, areaspline, column, bar, pie, scatter |
0 |
Width |
Chart width, default according to chart container adaptive width |
Null |
Height |
Chart height, default according to chart container adaptive height |
Null |
Margin |
Sets the spacing between the chart and other elements, as an array, such as [0,0,0,0] |
[NULL] |
Plotbackgroundcolor |
Background color of the main chart area, which is the area surrounding the x-axis and y-axis |
Null |
Plotbordercolor |
The color of the main chart area border, which is the border color of the area around the x-axis and y-axis |
Null |
Plotborderwidth |
Width of the main chart area border |
0 |
Shadow |
If you set the shadow, you need to set the background color backgroundcolor. |
False |
Reflow |
Whether the height and width of the chart area are used, and if width and height are not set, the size is adaptive. |
True |
Zoomtype |
Zoom by dragging the mouse, zooming along the x or Y axis, can be set to: ' X ', ' y ', ' xy ' |
‘‘ |
Events |
The callback functions of the Addseries method, the click Method, the Load method, the selection method, and so on, are supported by the event callback. |
|
Color: Colors Options
The color color option is used to set the colors scheme for the chart.
Parameters |
Describe |
Default value |
Color |
Used for displaying charts, lines/bars/pie charts, etc., in the form of an array of colors. |
Array |
Highcharts already offers a variety of color schemes by default, and when you want to display more graphics than the color category, the extra graphics will automatically start with the first color scheme. Ways to customize the color scheme:
Highcharts.setOptions({
colors: [‘#058DC7‘, ‘#50B432‘, ‘#ED561B‘, ‘#DDDF00‘, ‘#24CBE5‘, ‘#64E572‘, ‘#FF9655‘,
‘#FFF263‘, ‘#6AF9C4‘]
});
Title: Caption Options
The title Caption option sets the caption-related properties for the chart.
Parameters |
Describe |
Default value |
Text |
Title text content. |
Chart Title |
Align |
Horizontal alignment. |
Center |
VerticalAlign |
Vertical alignment. |
Top |
Margin |
The spacing between the title and the subtitle or the main chart interval. |
15 |
Floating |
If true, the caption can deviate from the main chart area and can be used with the X, Y property. |
False |
Style |
Sets the CSS style. |
{color: ' #3E576F ', FontSize: ' 16px '} |
Subtitle: Subtitle Options
The subtitle provides a property option that is roughly the same as the heading title, and can be referenced by the title option above, and it is worth mentioning that the subtitle's text option defaults to ' ', which is empty, so the subtitle is not displayed by default.
Xaxis:x axis Options
The x axis option is used to set the chart X axis related properties.
Parameters |
Describe |
Default value |
Categories |
Set X-axis category name, array, for example: Categories: [' Apples ', ' Bananas ', ' oranges '] |
[] |
Title |
X-axis name, supports text, enabled, align, rotation, style, and other attributes |
|
Labels |
Set the X-axis category name styles style, format formatter, angle rotation, etc. |
Array |
Max |
The x-axis maximum value (categories is empty), and if NULL, the maximum value automatically matches a maximum value based on the x-axis data. |
Null |
Min |
The x-axis minimum value (categories is empty), and if NULL, the minimum value automatically matches a minimum value based on the x-axis data. |
Array |
GridlineColor |
Grid (vertical bar) color |
#C0C0C0 |
Gridlinewidth |
Grid (vertical bar) width |
1 |
LineColor |
Baseline color |
#C0D0E0 |
LineWidth |
Baseline width |
0 |
Yaxis:y axis Options
The y-axis option is basically the same as the Xaxis option above, please refer to the parameter settings in the table above, no longer listed separately.
Series: Data column Options
The data column options are used to set properties related to the data to be displayed in the chart.
Parameters |
Describe |
Default value |
Data |
Data columns that are displayed in the chart can be data in arrays or in JSON format. such as: Data:[0, 5, 3, 5], or Data: [{name: ' point 1 ', y:0}, {name: ' point 2 ', y:5}] |
‘‘ |
Name |
Displays the name of the data column. |
‘‘ |
Type |
Data column type, support area, Areaspline, bar, column, line, pie, scatter or spline |
Line |
Plotoptions: Data point options
The plotoptions is used to set data point-related properties in a chart. The plotoptions has a slightly different set of properties depending on the chart type, and now lists the common options.
Parameters |
Describe |
Default value |
Enabled |
Whether to display data directly on data points |
False |
Allowpointselect |
Whether to allow data points to be selected with the mouse |
False |
Formatter |
callback function, format data display content |
Formatter:function () {return this.y;} |
ToolTip: Data point Prompt box
The tooltip is used to set the ToolTip information that is displayed when the mouse slides to a data point.
Parameters |
Describe |
Default value |
Enabled |
Whether to display a prompt box |
True |
BackgroundColor |
Set the background color of the cue box |
RGBA (255, 255, 255,. 85) |
BorderColor |
Hint box border color, default automatically matches the color of the data column |
Auto |
Borderradius |
Tip Box Round Angle |
5 |
Shadow |
Whether to display a cue box shadow |
True |
Style |
Set the content style of the cue box, such as font color |
Color: ' #333 ' |
Formatter |
callback function that is used to format the display of the output cue box. The returned content supports HTML tags such as: <b>, <strong>, <i>, <em>, <br/>, <span> |
2 |
Legend: Legend Options
The legend is used to set legend-related properties.
Parameters |
Describe |
Default value |
Layout |
Display form, supports horizontal horizontal and vertical vertical |
Horizontal |
Align |
The Alignment method. |
Center |
BackgroundColor |
Legend background color. |
Null |
BorderColor |
Legend border color. |
#909090 |
Borderradius |
Legend Border Angle |
5 |
Enabled |
Whether the legend is displayed |
True |
Floating |
Whether it can float, with the X, Y property. |
False |
Shadow |
Whether to show shadows |
False |
Style |
Set legend content Style |
‘‘ |
For options not listed in this document, please refer to the Highcharts official website in English: http://www.highcharts.com/ref/
[Go] Recommended Highcharts Learning website