Chart code composition of Highcharts Practical tutorials for Web page diagrams

Source: Internet
Author: User

Page Diagram highcharts Practical tutorial Chart Code composition Highcharts First Instance

Let's implement the first Highcharts instance of this book.

"Example 1-1" below to create a consecutive week in Beijing, the highest temperature line chart. The operation process is as follows:

(1 Create a new Web page file named hello.html. Also, set the title to Hello Highcharts. The code is as follows:

    • <meta charset= "Utf-8"/>
    • <title>hello highcharts</title>
    • <body>
    • </body>

(2 Add a div to the page and set the ID to container.

    • <div id= "Container" ></div>

(3 to set the style of the Div, the code is as follows:

    • <style type= "Text/css" >
    • #container {
    • width:500px;
    • height:300px;
    • border:1px solid #000;
    • padding:20px;
    • margin:10px;
    • }
    • </style>

(4 introduce jquery scripts and highcharts scripts, with the following code:

    • <script src= "Jquery.js" ></script>
    • <script src= "Highcharts.js" ></script>

Note: These two script files need to be placed in the directory where the hello.html is located.

(5 ) to add a chart drawing code. The code is as follows:

  • <script type= "Text/javascript" >
  • $ (document). Ready (function () {
  • var options = {
  • Chart: {
  • Type: ' line '
  • },
  • Title: {
  • Text: ' Beijing's highest temperature in a week '
  • },
  • Subtitle: {
  • Text: ' 2015.02.08--2015.02.14 '
  • },
  • Series: [{
  • Name: ' Maximum temperature ',
  • Data: [7, 11, 8, 7, 9, 9, 9]
  • }]
  • };
  • $ (' #container '). Highcharts (options);
  • });
  • </script>

Save the above file as shown in result 1.18.

Figure 1.18 the first instance

Highcharts Chart composition

To facilitate a better understanding of the highcharts chart, the implementation of the Highcharts chart is explained in two ways, from the interface and code.

Highcharts Interface Composition

In the first example, we implemented a chart. As a chart, it is usually composed of a chart area, a title, a plot area, an axis, a legend/data column, and so on, as shown in 1.19. In Highcharts, each part is composed of one or more components. Where the black box is enclosed is the chart area. The part that is surrounded by axes is the plot area. The implementation of these sections will be explained in turn later. Here, you just need to know the name of each part.

Figure 1.19 Chart composition

Highcharts Code composition

Although we did not write much code in the first instance, figure 1.19 shows rich content. This fully embodies the ease of use of highcharts. The implementation of the Highcharts chart is actually divided into two steps, which are explained in turn.

1. Chart configuration Item Object

The Highcharts core body is the chart configuration item object. This object contains the various data and configuration information for the chart. Each section is often made up of smaller configuration item objects. Users simply follow the format of the specification, fill in the corresponding data and configuration values, you can. The whole process is like building bricks. The following is a brief introduction to the configuration item object for the first instance.

  • var options = {
  • Chart: {//Charts basic information
  • Type: ' line '//Specify chart type
  • },
  • Title: {//Set chart title
  • Text: ' Beijing one week maximum temperature '//Specify title content
  • },
  • Subtitle: {//Set chart subtitle
  • Text: ' 2015.02.08--2015.02.14 '//Set subtitle content
  • },
  • Series: [{//Define data columns
  • Name: ' Maximum temperature ',//header for the specified data column
  • Data: [7, 11, 8, 7, 9, 9, 9]//Specify node
  • }]
  • };

This piece of content can also be implemented in a way that traditional JavaScript is assigned value by item. From a maintenance perspective, it is recommended that the above approach be implemented.

2. Drawing a chart in a container

After the configuration item object is specified, the user can use the Higcharts method provided by the Highcharts plug-in to draw the chart in the specified container. The code you need requires only the following line.

    • $ (' #container '). Highcharts (options);

With the above two steps, you can draw the chart shown in Figure 1.19 on the existing Web page. The user expands the chart and only needs to modify the chart configuration object.

Highcharts commercial Licensing and custom development

In the actual highcharts development process, developers often face the issue of authorization and complex requirements. Here are the most concise explanations of these two aspects to help developers better use Highcharts.

Highcharts Business License

Highcharts is a very good chart plugin. When used, it is free for both personal and non-commercial applications. For commercial development, developers need to purchase the appropriate business license. At home, developers can purchase a commercial license through Highcharts's officially authorized higcharts Chinese language Network (

The website is the most authoritative Highcharts technology website in China. It provides highcharts services, such as commercial licensing, customization, consulting and other services. Enter the URL in the browser and you will be able to access the website's commercial licensing page, as shown in 1.20.

Figure 1.20 Business License page

Follow the on-page prompts to request a commercial license.

Highcharts Custom Development

In Highcharts, the realization of all kinds of graphs adopts the template-based mechanism. Users can configure beautiful charts with minimal setup. But in actual development, developers often face a variety of more complex customer needs. At this time, using Highcharts to provide various configuration items is often difficult to achieve. With this kind of problem, users can purchase customized services to solve the problems encountered in the use.

Highcharts Chinese network to provide first-class technical advice and customized services, users only need to enter the official website of the Chart Customization Service page (1.21), you can apply for response services.

Figure 1.21 Custom Service

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 code composition of Highcharts Practical tutorials for Web page diagrams

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: 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.