[Go] Recommended Highcharts Learning website

Source: Internet
Author: User
Tags border color

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

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.