Tag group and loading animation for Highcharts practical tutorial,

Tag group and loading animation for Highcharts practical tutorial,
Tag group and loading animation Highcharts tag group in Highcharts practical tutorial

Most of the elements in the chart provide the label function. However, we often need to provide additional information. In this case, it is not very convenient to use the label function of the original chart elements. Highcharts provides the label group function. This function allows you to add one or more labels at any position in the chart area, as shown in Figure 3.9. In this chart, a label is added before the subtitle to indicate the year of the data column.

Figure 3.9 label group application

Structure of the Highcharts label Group

In Highcharts, label groups are implemented using the labels component. The syntax format is as follows:

• Labels :{

• // Related configuration items

• }

Because a label group does not belong to any chart element, it is directly included in the chart option, instead of being a subitem of other chart elements.

Highcharts build tags

As the name suggests, a tag group consists of a group of tags. You can define one or more tags when using the service. Tags in a tag group are composed of items components. The syntax is as follows:

• Items :[{

• // Configuration items

• },

• {

• // Configuration items

• }

• ... // Can be multiple items

• ]

Each tag is enclosed by a curly braces. Multiple tags are separated by commas and then enclosed.

To create tags, you can use the configuration items html and style to set the TAG content and position. The syntax is as follows:

• Html: String1

• Style: CSSObject

The String parameter specifies the TAG content. The value can be HTML code or plain text content. The CSSObject parameter specifies the Label display position, including left and top configuration items. The syntax is as follows:

• Left: Number1

• Top: Number2

The Number1 parameter indicates the horizontal offset distance of the tag. Unit: px. Default Value: 0. the Number2 parameter indicates the vertical offset distance of the tag. Unit: px. Default Value: 0.

Note: You must set the style, including one of the two left and top configuration items to display the label. Otherwise, labels cannot be displayed only when the configuration item html is available.

[Instance 3-9: items] The following shows the tag effect in Figure 3.9. The modification code is as follows:

• Labels :{

• Items: [{// Add Tag

• Html: 'August 1, 2013-August 1, 2015 ', // set the TAG content

• Style: {// set the tag position

• Left: 10, // set the horizontal position

• Top:-25 // set the vertical position

• }

• }]

• }

After execution, the effect is 3.9. As you can see, the label uses the upper left corner of the drawing area as the origin by default. Both configuration items x and y are calculated relative to this point.

Highcharts sets the label Style

In the items component, you can set the text style of each tag by specifying html scripts in the configuration item HTML. For ease of setting, Highcharts also provides the configuration style for the component labels to set all the label styles. The syntax is as follows:

• Style: CSSObject

The CSSObject parameter is used to specify the CSS styles that all labels share. The default value is {color: '# 3e576f '}.

You can add a specific style as needed.

Highcharts loading Animation

A loading animation is a transitional animation. When it takes a long time for a chart to load data, but the chart data cannot be displayed, you can use an animation. The effect is 3.10. The animation is located in the drawing area. The original content in the drawing area is overwritten, and the prompt content Loading... is displayed in the center ....

Figure 3.10 loading an animation

Highcharts display loading Animation

The input animation is not automatically displayed because it is different from the preceding chart element. It needs to be explicitly called using chart objects. In this case, use showloading (). The syntax is as follows:

• Chart. showloading (String str)

The chart must be a chart object. The str parameter specifies the configuration item of the loading component. The return value of this method is null.

In addition to the showloading method parameter, you can also specify the loading animation in the chart options. The syntax format is as follows:

• Loading :{

• // Related configuration items

• }

[Instance 3-10: showloading] The following figure shows the loading animation. The modification code is as follows:

• <Script type = "text/javascript">

• $ (Document). ready (function (){

• Var options = {

• Chart :{

• Type: 'line ',

• ZoomType: 'X'

• },

• Title :{

• Text: 'maximum temperature in a week in Beijing'

• },

• Series :[{

• Name: 'maximum temperature of 2015 ',

• Data: [6, 6, 7, 4, 5, 6, 8]

• }

• ],

• Credits :{

• Text: 'Ba ',

• Href: 'http: // daxueba.net'

• }

• };

• Var chart; // define chart Variables

• $ ('# Iner'). highcharts (options); // create a chart Animation

• Chart = $ ('# iner'). highcharts (); // obtain the chart object

• Chart. showLoading ();// Display the loading Animation

• });

• </Script>

After execution, the effect is 3.11.

Figure 3.11 loading Animation

Loading an animation does not automatically disappear. If you cancel the animation loading, you need to use the hideloading () method of the chart object. The syntax is as follows:

• Chart. hideloading ()

The chart indicates the chart object. This method has no parameters and the return value is null.

Highcharts local loading Animation

As shown in Figure 3.11, the default prompt for Loading an animation is Loading .... This is unfriendly to domestic users. You can localize the prompt content. The configuration item loading of the component lang needs to be used. The syntax is as follows:

• Loading: String

The String parameter is used to specify the content of the prompt displayed in the loading animation. The default value is loading ....

[Instance 3-11: customloading] localized the content of the prompts for loading animations and changed it to "loading data ...". The modification code is as follows:

• Highcharts. setOptions ({

• Lang :{

• Loading :'Loading data... '// sets the prompt content for loading an animation.

• }

• });

After execution, the effect is 3.12.

Figure 3.12 local animation Loading

Note:Localization of loading animations is not a configuration item for setting the component loading, but a configuration item in component lang.

Set the animation effect in Highcharts

To make the loading animation more in line with the needs of the current chart, you can use the configuration items provided by Highcharts to customize the animation. The following describes several common customization methods in sequence.

1. Set the style of the animation Area

The animation loading area overwrites the drawing area. In this way, when an animation is loaded, the display in the drawing area can be blocked to remind users. In this area, you can use the style configuration item of the component loading. The syntax is as follows:

• Style: CSSObject

The CSSObject parameter specifies the CSS style of the loading animation area. The default value is as follows:

• {

• Position: 'absolute ',

• BackgroundColor: 'white ',

• Opacity: 0.5,

• TextAlign: 'center'

• }

2. Set the style of the prompt content

Although the prompt content supports certain HTML tags, the better way is to use the configuration item labelStyle. The syntax is as follows:

• LabelStyle: CSSObject

The CSSObject parameter specifies the CSS style of the animated content. The default value is as follows:

• {

• "FontWeight": "bold ",

• "Position": "relative ",

• "Top": "45%"

• }

3. Set the animation effect

In addition to setting various CSS Styles, you can also set the animation fade-in and fade-out duration. In this case, you must use the showDuration and hideDuration configuration items. The syntax is as follows:

• ShowDuration: Number1

• HideDuration: Number2

The Number1 parameter specifies the animation duration in milliseconds. The default value is 100. The Number2 parameter specifies the animation duration in milliseconds. The default value is 100.

[Example 3-12: loading] The following describes how long the light loading effect lasts for an animation. The modification code is as follows:

• Loading :{

• ShowDuration: 1000,// Set the duration of the fade-in effect

• HideDuration: 1000// Set the fade-out duration

• }

Note:The Fade-in effect is valid only when the animation is loaded. Otherwise, the fade-out effect is valid only when the animation is hidden.

This article is selected from: webpage chart Highcharts practice tutorial basic university overlord internal information, reprinted please indicate the source, respect technology respect it people!