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 plot area. This chapter explains the settings and creation of the chart area in detail.

Page Diagram Highcharts chart area composition

For ease of management, Highcharts draws all the chart elements in a box area, as shown in 2.1. This area is called the chart area. Since 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 plot area, shown in 2.1.

Figure 2.1 Chart Area composition

As you can see from Figure 2.1, the entire chart area consists of a rectangle of axes divided into two parts: part of the plot area around the axis, part of the chart area and the plot 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 section between the chart area and the plot area. Chart elements such as headings and legends are often distributed in this area. This section explains the settings for the outer chart area in detail.

Page diagram highcharts Basic settings for the outer chart area

The basic settings for the outer chart area include the chart type, the HTML element where the chart area resides, and the width and high properties of the outer chart area. These properties are explained in turn below.

1. Chart type

In 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. The syntax form is as follows:

• Type:string

Where string is the chart type string 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. If 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 a script, you can also specify which container in a Web page the chart is drawn directly by configuring the item Renderto. The syntax form is as follows:

• Renderto:string

Where string is the ID of the page element.

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

3. Specify the outer chart area size

In Highcharts, you can specify the width and height of the outer chart area by configuring the item width and height. The syntax form is as follows:

• Width:number1
• Height:number2

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

"Instance 2-1:chartheightandwidth" modifies the code of instance 1-1, sets the width of the chart area to 300px, and the height is set to 200px. The code is as follows:

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

After execution, the effect is shown in 2.2.

Note: in order to display the chart area size, the border width of the chart area is set to 1px.

Figure 2.2 Setting the length and width of the chart area

If you do not set the length-width value of the chart area, Highcharts is automatically calculated from 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

Where color is a value that is enclosed in single quotation marks. The default value is #ffffff.

"Instance 2-2:chartbackgroundcolor" modifies the code for instance 2-1, setting the chart area background color to #ffff00. The code is as follows:

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

After execution, the effect is shown in 2.3.

Figure 2.3 Setting the chart area background color

Page Chart highcharts border of the outer chart area

In Highcharts, allows you to set a border for the outer chart area. Related configuration items include width borderwidth, color bordercolor, Border fillet radius borderradius. Its syntax is as follows:

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

Where Number1 represents the width of the border, the default value is 0, there is no border, color is a string representing the color, and Number2 represents the fillet radius of the border. The units of Number1 and Number2 are pixel px.

Under instance 2-3:chartborder, modify the code for instance 1-1 to add a border to the chart area. The code that needs to be modified is as follows:

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

After execution, the effect is shown in 2.4.

Figure 2.4 Setting the border of the chart area

Page diagram Highcharts The extent of the outer chart area

The outer chart area is inside the chart area, outside the plot area, and shown in the light green section of 2.5. Typically, the extent of the outer chart area is calculated automatically by Highcharts.

Figure 2.5 spacing between the chart area and plot area

You can also set the bottom margin, left margin, right margin, and top margin of two regions, respectively, by using 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

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

Instance 2-4:chartmargin modifies the space below the chart area and plot area of instance 1-1, setting it to 2. Modify the code as follows:

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

After execution, the effect is shown in 2.6. From the running results, you can see that when the margin is improperly set, some of the chart contents will be displayed incomplete or even lost. For example, the scale of the x axis is not displayed.

Figure 2.6 Modifying chart area and plot area spacing

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

• Margin:array

Where array is an array that sets the top margin, right margin, bottom margin, and left margin of the chart area and plot area. With 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. As shown in 2.7, the green part is the spacing between the two. For this part of the spacing, the Chart Component provides a corresponding configuration item to set. For example, the configuration item Spacingbottom is used to set the bottom spacing, the configuration item spacingleft to set the left margin, the configuration item spacingright to set the right 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

Where the Number1 parameter is used to set the bottom spacing, the default value for the 15;number2 parameter is to set the left spacing, the default value for the 10;number3 parameter is to set the right margin, the default is the 10;NUMBER4 parameter to set the top spacing, and the default value is 10.

"Instance 2-5:spacing" cancels the space between the chart contents and the chart area in instance 1-1. Modify the code as follows:

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

After execution, the effect is shown in 2.8. You can see that when you cancel the spacing, the legend and caption are close to the outer chart area border.

Figure 2.8 Canceling chart area and chart content spacing

For ease of Setup, the Chart component provides a configuration item spacing, which is used to set four spacing at the same time. The syntax form is as follows:

• Spacing:array

Where the array parameter is an array of four numeric values. Each of these values, in turn, represents the top, right, bottom, and left spacing values. Use the attribute spacing to simplify 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 with the following code:

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

This time, will cause some of the chart content display is incomplete, 2.9 is shown. 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 increase the stereoscopic sense, the Chart component provides shadow configuration items. Its syntax is as follows:

• shadow:boolean| Object

Where the shadow parameter can be a Boolean value of True/false, or it can be a parameter object.

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

Under instance 2-6:shadow, add a shadow effect to instance 1-1. Modify the code as follows:

• Chart: {
• Type: ' line ',
• shadow:true //Enable Shadow effect
• },

After execution, the effect is shown in 2.10. A gray shadow effect appears on the right and bottom sides of the chart area.

Figure 2.10 Chart Shadows

(2) The user can also add a shadow effect as an object. The syntax form is as follows:

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

Where the configuration item color represents the shade of the shadow, and the configuration item setx represents the offset distance of the shadow on the x-axis; 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 re-implement the shadow effect of instance 2-6. Modify the code as follows:

• Chart: {
• Type: ' line ',
• Shadow: {
• color: ' Grey ',//Set shadow Color
• offsetx:1, //Set offset distance in x-axis direction
• offsety:1, //Set offset distance in 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 to set the CSS style of the container div in which the chart is located. The next two properties are explained in turn.

1. Interior styling style

Using the configuration item style, you can specify the style you use directly in the JavaScript script. Its grammatical form is as follows:

• Style:cssobject

Where property Cssobject is a CSS object, consisting of CSS properties and values. The 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

Where the parameter string represents the CSS class selector name. For specific use, please refer to CSS related books.

This article is selected from: Web Diagram highcharts Practical Tutorial Foundation of the University PA Internal information, reproduced please indicate the source, respect the technology respect the IT person!

Chart area of the Highcharts Practical tutorial for Web page diagram