How to Use Highcharts pure Javascript charts and multiple highcharts charts

How to Use Highcharts pure Javascript charts and multiple highcharts charts

Highcharts provides a large number of option configuration parameters, allowing you to easily customize charts that meet user requirements. Currently, the official website only provides the English version of development configuration instructions, while the Chinese version of the documentation is very small online and fragmented. Here, I will organize the core parameter options frequently used by Highcharts into a document to share with you. Chart: The Chart area option is used to set the attributes of the Chart area. Parameter description default value backgroundColor set chart area background color # ffffborderwidth set chart Border width 0 borderRadius set chart border rounded corner angle 5 renderTo chart placed container, generally put a DIV in html, obtain the DIV id attribute value nulldefaultSeriesType default chart type line, spline, area, areaspline, column, bar, pie, scatter 0 width chart width. By default, nullheight is based on the adaptive width of the chart container, by default, the spacing between the chart and other elements is set based on the adaptive height of the chart container nullmargin, for example, the background color in the main chart area of [0, 0, 0] [null] plotBackgroundColor, that is, the background color nullplotBorderColor of the area enclosed by the X and Y axes. Border color of the area enclosed by the Axis nullplotBorderWidth the Border width of the main chart area 0 shadow whether to set the shadow, you need to set the background color backgroundColor. Whether falsereflow uses the height and width of the chart area. If the width and height are not set, the system automatically adjusts the size. TruezoomType: drag the mouse to zoom in and zoom in along the x or y axis. It can be set to 'x', 'y', or 'xy''' events Event Callback. The addSeries method is supported, click method, load method, selection method, and other callback functions. Color: Color options are used to set the Color scheme of the chart. The default value of parameter description is color, which is used to display the color of charts, such as line, column, and pie chart. ArrayHighcharts provides multiple color schemes by default. When you want to display more images than the color types, the more images will be automatically selected from the first color scheme. How to customize the color scheme: Highcharts. setOptions ({colors: ['#058DC7', '#50B432', '# ED561B', '# DDDF00', '#24CBE5', '#64E572 ', '# ff9655',' # FFF263 ',' #6AF9C4 ']}); Title: The Title option is used to set the Title attributes of a chart. The parameter description defaults to the text content of the text title. Chart titlealign horizontal alignment. CenterverticalAlign vertical align. The gap between the topmargin title and Subtitle or the main chart range. 15. Whether floating is floating. If true, the title may deviate from the main chart area and can be used in combination with the x and y attributes. Set the CSS style for falsestyle. {Color: '# 3e576f', fontSize: '16px'} Subtitle, it is worth mentioning that the text option of the subtitle is ''by default, which is null. Therefore, the subtitle is not displayed by default. XAxis: the X axis option is used to set attributes related to the X axis of the chart. The default value of parameter description is categories. Set the x-axis category name and array, for example, categories: ['append', 'bananas', 'oranges'] [] title X-axis name, supports text, enabled, align, rotation, style, and other attributes labels to set the style, format formatter, and angle rotation of each category name on the X axis. Arraymax X axis maximum value (when categories is null). If it is null, the maximum value automatically matches a maximum value based on the X axis data. The minimum value of the nullmin X axis (when categories is null). If it is null, the minimum value automatically matches a minimum value based on the X axis data. ArraygridLineColor grid (vertical line) color # c0c0gridlinewidth grid (vertical line) Width 1 lineColor baseline color # C0D0E0lineWidth baseline width 0 yAxis: Y axis option Y axis options are basically consistent with the preceding xAxis options, refer to the parameter settings in the preceding table and do not list them separately. Series: data column options are used to set the data-related attributes to be displayed in the chart. The default value of parameter description is the data column displayed in the chart. It can be in array or JSON format. For example, 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. area, areaspline, bar, column, line, pie, scatter or spline lineplotOptions are supported. The data point option plotOptions is used to set the data point attributes in the chart. PlotOptions has slightly different attribute settings based on various chart types. Common options are listed. Parameter description default value enabled: whether to directly display data falseallowPointSelect on the data point whether to allow the use of the mouse to select the data point falseformatter callback function, format the data display content formatter: function () {return this. y;} Tooltip: Tooltip is used to set the prompt box information displayed when the mouse slides toward the data point. Parameter description default value enabled whether to display prompt box truebackgroundColor set prompt box background color rgba (255,255,255 ,. 85) borderColor indicates the border color of the prompt box. By default, the color of the data column is automatically matched. autoborderRadius indicates the circle angle of the box. 5. indicates whether the shadow displays the prompt box shadow. truestyle indicates the style of the prompt box content, such as the font: '#333' The formatter callback function is used to format the display content in the output prompt box. Html tags such as <B>, <strong>, <I>, <em>, <br/>, and <span> 2 Legend: the legend option legend is used to set legend attributes. The default value of parameter description is layout. horizontal and vertical horizontalalign align alignment are supported. CenterbackgroundColor legend background color. The border color of the nullborderColor legend. #909090 borderRadius legend border angle 5 enabled: whether the legend truefloating can be floating or not, with the x and y attributes. Falseshadow: whether to display shadow. falsestyle: Set the legend content style.