Chart area of the Highcharts Practical tutorial for Web page diagram

Page Diagram highcharts Practical Tutorial Chart Area page Chart highcharts chart area

The chart area is the basic area of the chart.

All the data and graphics are plotted in the chart area. From the drawing range, the chart area is divided into the outer chart area and the paint area. This chapter will explain the setting and creation of the chart area in detail.

Page Diagram Highcharts chart area composition

For ease of management, Highcharts will draw all the chart elements in a box area, 2.1 see. This area is called the chart area.

Because the most important data in the chart is the chart graphic, the area in which the chart graphic is located constitutes a separate area, called the paint area, which is seen by 2.1.

Figure 2.1?? Chart Area composition

Can be seen from Figure 2.1. The entire chart area consists of a rectangle of axes divided into two parts: part of the drawing area around the axis, part of the chart area and the drawing area. Called the outer chart area. The following two sections are explained in turn.

Page Diagram Highcharts Outer chart area

The outer chart area is the part between the chart area and the paint area. Chart elements such as headings and legends are often distributed in this area. This section explains the settings for the outer chart area.

Page diagram highcharts Basic settings for the outer chart area

The outer chart area basic settings mainly include the chart type, the HTML element where the chart area resides, and the width and high properties of the outer chart area. The following explains these properties in turn.

1. Chart type

In the Highchart. Each chart is implemented by the Chart component. Therefore, to get different types of charts, you must specify the chart type.

The chart type is specified by the type configuration item. Syntax forms such as the following:

• Type:string

Of String is a string of the chart type specified by Highcharts. The values can be area, Arearange, Areaspline, Areasplinerange, bar, Goxplot, Bubble, column, ColumnRange, ErrorBar, funnel, gauge, Heatmap, line, pie, Pyramid, Scatter, series, solidgauge, spline, Waterfail.

Assuming not specified, the default is the line type.

In instance 1-1, the chart type line (polyline) type is specified.

• Type: ' line '

2. The HTML element where the chart area is Renderto

In the script, you can also specify which container in the Web page the chart is drawn directly from the configuration item Renderto. Syntax forms such as the following:

• Renderto:string

The string is the ID of the page element.

In instance 1-1, the jquery selector is used directly. Therefore, this option is not specified.

3. Specify the outer chart area size

In the Highcharts. The width and height of the outer chart area can be specified by configuring the item width and height. Syntax forms such as the following:

• Width:number1
• Height:number2

Among them, Number1 and Number2 are respectively the width and height values of the chart area. Units are pixels.

"Instance 2-1:chartheightandwidth" changes the code for instance 1-1. Set the chart area width to 300px and the height to 200px.

The code is as follows:

• ? ? ? ? ? ? ? ?? Chart: {
• ? ? ? ? ? ? ? ? ? ?? Type: ' line ',
• ? ? ? ? ? ? ? ? ? ?? height:200,???????????????????????????????????????? Specify width
• ? ? ? ? ? ? ? ? ? ?? width:300,?????????????????????????????????????????? Specify height
• ? ? ? ? ? ? ? ? ? ?? Borderwidth:1
• ? ? ? ? ? ? ? ??},

After running, effect 2.2 is seen.

Note: in order to display the chart area size. This sets the chart area's border width to 1px.

Figure 2.2?? Set the length and width of the chart area

Suppose you do not set the length-width value of the chart area. Highcharts is calculated on its own initiative based on the elements in the chart area.

If the chart area contains an element height of 0, set Heigh to 400px.

4. Specify the outer chart area background color

To beautify the chart display, you can specify the background color of the chart area by configuring the item BackgroundColor. The syntax is as follows:

• Backgroundcolor:color

Color is the value that is used to enclose a single argument. The default value is #ffffff.

"Instance 2-2:chartbackgroundcolor" changes the code of instance 2-1 and sets the background color of the chart area to #ffff00. The code is as follows:

• ? ? ? ? ? ? ? ?? Chart: {
• ? ? ? ? ? ? ? ? ? ?? Type: ' line ',
• ? ? ? ? ? ? ? ? ? ?? HEIGHT:200,
• ? ? ? ? ? ? ? ?????? width:400,
• ? ? ? ? ? ? ? ? ? ?? Borderwidth:1,
• ? ? ? ? ? ? ? ? ? ?? backgroundcolor: ' #FFFF00 '????? Set Background color
• ? ? ? ? ? ? ? ??},

After running, effect 2.3 is seen.

Figure 2.3?? Set chart Area background color

Page Chart highcharts border of the outer chart area

In the Highcharts. Agree to set a border for the outer chart area. The related configuration items include width borderwidth, color bordercolor, Border fillet radius borderradius.

Its syntax is as follows:

• Borderwidth:number1
• Bordercolor:color
• Borderradius:number2

Of Number1 represents the width of the border, and the default value is 0. Color is a string that represents a color; Number2 represents the fillet radius of the bounding rectangle. The units of Number1 and Number2 are pixel px.

"Instance 2-3:chartborder" below changes the code for instance 1-1. Adds a border to the chart area.

The code needs to be changed such as the following:

• ? ? ? ? ? ? ? ?? Chart: {
• ? ? ? ? ? ? ? ? ???? Type: ' line ',
• ? ? ? ? ? ? ? ? ? ?? Borderwidth:3,???????????? Set the width of the border
• ? ? ? ? ? ? ? ? ? ?? bordercolor: ' #000000 ',????? Set the color of the border
• ? ? ? ? ? ? ? ? ? ?? borderradius:10??????????? Set rounded corners of a border
• ? ? ? ? ? ? ? ??},

After running, effect 2.4 is seen.

watermark/2/text/ahr0cdovl2jsb2cuy3nkbi5uzxqvzgf4dwviyq==/font/5a6l5l2t/fontsize/400/fill/i0jbqkfcma==/ Dissolve/70/gravity/center "/>

Figure 2.4?? Set the border of a chart area

Page diagram Highcharts The extent of the outer chart area

The outer chart area is inside the chart area, outside the paint area. 2.5 of the light green part of the seen.

Typically, the extent of the outer chart area is calculated by highcharts itself.

Figure 2.5?? Spacing between chart area and paint area

Users can also set the bottom margin, left margin, right margin, and top margin of two regions, respectively, through the Chart component's configuration Items marginbottom, MarginLeft, MarginRight, and MarginTop properties. The syntax is as follows:

• Marginbottom:number1
• Marginleft:number2
• Marginright:number3
• Margintop:number4

Of Number1, Number2, Number3, and Number4 each represent margin values. The unit is PX. These four configuration items can be used at the same time and can be used separately.

"Instance 2-4:chartmargin" changes the chart area of instance 1-1 and the spacing below the paint area, setting it to 2. Change the code such as the following:

• ? ? ? ? ? ? ? ?? Chart: {
• ? ? ? ? ? ? ? ? ? ?? Type: ' line ',
• ? ? ? ? ? ? ? ? ? ?? Borderwidth:1,
• ? ? ? ? ? ? ? ? ? ?? Marginbottom:2,?????????????????????????????????????? Set Bottom margin
• ? ? ? ? ? ? ? ? ? ?? marginleft:30,?????????????????????????????????????????? Set the left margin
• ? ? ? ? ? ? ? ? ? ?? marginright:30,???????????????????????????????????????? Set right margin
• ? ? ? ? ? ? ? ? ? ?? margintop:20???????????????????????????????????????????? Set Top margin
• ? ? ? ? ? ? ? ??},

After running. Effect 2.6 see.

You can see from the run results when the margins are set incorrectly. Will cause some of the chart content display incomplete, even lost.

For example, the scale of the x axis is not displayed.

Figure 2.6?? Change chart area and paint area spacing

To simplify the operation, Highcharts provides a configuration entry margin that can be set directly to four margins at a time. The syntax is as follows:

• Margin:array

, array is an array that sets the top margin, right margin, bottom margin, and left margin of the chart area and the paint area.

After you use this property. The code for instance 2-4 can be simplified to:

• ? ? ? ? ? ?? var options = {
• ? ? ? ? ? ? ? ?? Chart: {
• ? ? ? ? ? ? ? ? ? ?? Type: ' line ',
• ? ? ? ? ? ? ? ? ? ?? Borderwidth:1,
• ? ? ? ? ? ? ? ? ? ?? margin:[2,30,30,20]?????????????????????????????????? Set top margin, right margin, bottom margin, left margin
• ? ? ? ? ? ? ? ??},

Page diagram Highcharts the spacing between the outer chart area and the chart content

For aesthetics, there is a certain amount of space between the contents of the chart and the chart area. 2.7 See, the green part is the spacing between the two.

For this part of the spacing, the Chart component provides the appropriate configuration items to set. For example, the configuration item Spacingbottom is used to set the bottom spacing. The configuration item spacingleft is used to set the left margin, the configuration item spacingright to set the right side spacing, and the configuration item spacingtop to set the top spacing.

Figure 2.7?? Spacing of chart area and chart contents

The syntax for these four configuration items is as follows:

• Spacingbottom:number1
• Spacingleft:number2
• Spacingright:number3
• Spacingtop:number4

The Number1 parameter is used to set the bottom spacing, the default is 15;number2 to set the left margin, and the default is 10;number3 to set the right side spacing. The default value is 10;number4 to set the top spacing. The default value is 10.

"Instance 2-5:spacing" below cancels the space between the chart contents and the chart area in instance 1-1. Change the code such as the following:

• ? ? ? ? ? ? ? ?? Chart: {
• ? ? ? ? ? ? ? ? ? ?? Type: ' line ',
• ? ? ? ? ? ? ? ? ? ?? Borderwidth:1,
• ? ? ? ? ? ? ? ? ? ?? spacingbottom:0,???????????????????????????????????? Set the bottom spacing
• ? ? ? ? ? ? ? ? ? ?? spacingleft:0,??????????????????????????????????????????? Set left side spacing
• ? ? ? ? ? ? ? ? ? ?? spacingright:0,???????????????????????????????????????? Set right side spacing
• ? ? ? ? ? ? ? ? ? ?? spacingtop:0????????????????????????????????????????????? Set top spacing
• ? ? ? ? ? ? ? ??},

After running, effect 2.8 is seen. Able to find, after canceling the spacing. The legend and caption are close to the outer chart area border.

Figure 2.8?? Cancel chart area and chart content spacing

For ease of Setup, the Chart component provides a configuration item spacing. Used to set four spacing at the same time. Syntax forms such as the following:

• Spacing:array

The array parameters are arrays of four numeric values. Each value in turn represents the top, right, bottom, and left margin values.

Using the attribute spacing simplifies the code for instance 2-5.

The simplified code is as follows:

• ? ? ? ? ? ? ? ?? Chart: {
• ? ? ? ? ? ? ? ? ? ?? Type: ' line ',
• ? ? ? ? ? ? ? ? ? ?? Borderwidth:1,
• ? ? ? ? ? ? ? ? ? ? spacing:[0,0,0,0]???????????????????????????????? Set four spacing values in turn
• ? ? ? ? ? ? ? ??},

The spacing value can also be set to a negative number. The code is as follows:

• SPACING:[-10,-10,-10,-10]

This time, will cause some of the chart content display incomplete, 2.9 see.

Neither the title nor the legend is fully displayed.

Figure 2.9?? The spacing value is negative

Note: The Copyright Information section is not affected by the spacing.

Page Diagram Highcharts Outer chart Area shadow

To add three-dimensional sense. The Chart Component provides shadow configuration items. Its syntax is as follows:

• shadow:boolean| Object

, the shadow can be a Boolean true/false, or a Parameter object.

(1) when it is a Boolean value, you can use True and false to indicate whether there are attributes.

"Instance 2-6:shadow" The shadow Effect is added to instance 1-1 below.

Change the code such as the following:

• ? ?????????????? Chart: {
• ? ? ? ? ? ? ? ? ? ?? Type: ' line ',
• ? ? ? ? ? ? ? ? ? ?? shadow:true??????????????????????????????????????????????? Enable Shadow Effects
• ? ? ? ? ? ? ? ??},

After running, effect 2.10 is seen. A shaded shadow effect appears on the right and bottom sides of the chart area.

watermark/2/text/ahr0cdovl2jsb2cuy3nkbi5uzxqvzgf4dwviyq==/font/5a6l5l2t/fontsize/400/fill/i0jbqkfcma==/ Dissolve/70/gravity/center "/>

Figure 2.10?? Chart shadows

(2) The user can also use the object to join the shadow effect. Syntax forms such as the following:

• {
• ? ?? Color:color,
• ? ?? Setx:number1,
• ? ?? Sety:number2,
• ? ?? Opacity:number3,
• ? ?? Width:number4
• }

, the color of the shadow is indicated by the configuration item color. The configuration item setx represents the offset distance of the shadow on the x-axis, and the configuration item sety represents the offset distance of the shadow on the y-axis; The configuration item opacity represents the transparency of the shadow, and the configuration item width sets the width of the shadow.

Instance 2-7:shadowobject uses the object to achieve the shadow effect of instance 2-6 again.

Change the code such as the following:

• ? ? ? ? ? ? ? ?? Chart: {
• ? ? ? ? ? ? ? ? ? ?? Type: ' line ',
• ? ? ? ? ???????????? Shadow: {
• ? ? ? ? ? ? ? ? ? ? ? ?? color: ' Grey ',????????????????????????????????????????????????? Set Shadow Color
• ? ? ? ? ? ? ? ? ? ? ? ?? offsetx:1,????????????????????????????????????????????????????? Set offset distance in x-axis direction
• ? ? ? ? ? ? ? ? ? ? ? ?? offsety:1,????????????????????????????????????????????????????? Sets the offset distance of the y-axis direction
• ? ? ? ? ? ? ? ? ? ? ? ?? opacity:0.5,?????????????????????????????????????????????????? Set transparency
• ? ? ? ? ? ? ? ? ? ? ? ?? width:2????????????????????????????????????????????????????????? Set Shadow Width
• ? ? ? ? ? ? ? ? ? ??}
• ? ? ? ? ? ? ? ??},

Page Diagram Highcharts chart area style

To make the chart more aesthetically pleasing to the user, the Chart component provides two configuration items. The CSS style used to set the container div where the chart is located.

These two properties are explained in turn.

1. Interior styling style

Use the configuration item style. The ability to specify the style used directly in the JavaScript script. Its grammatical form is as follows:

• Style:cssobject

The attribute Cssobject is a CSS object, which consists of CSS properties and values. Its default values are as follows:

• {"fontFamily": "\" Lucida grande\ ", \" Lucida Sans unicode\ ", Verdana, Arial, Helvetica, Sans-serif",
• ?" FontSize ":" 12px "}

2. External style properties classname

To facilitate user management of CSS scripts, the Chart Component provides an external style configuration item classname.

Its syntax is as follows:

• Classname:string

A string representing the CSS class selector name. For specific use, please refer to CSS related books.

This article is selected from: Web diagram highcharts Practical tutorial Basics of University bullying internal information. Reprint please indicate the source. Respect technology respect IT people!

Chart area of the Highcharts Practical tutorial for Web page diagram