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 (hcharts.cn).
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 http://www.hcharts.cn/service/license.php 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