English 中文(简体)
Highcharts Tutorial

A. 高等教育

Selected Reading

Highcharts - Configuration Syntax
  • 时间：2024-12-22

Highcharts - Configuration Syntax

Previous Page Next Page  

In this chapter, we will showcase the configuration required to draw a chart using the Highcharts API.

Step 1: Create HTML Page

Create an HTML page with the jQuery and Highcharts javascript pbraries.

HighchartsTestHarness.htm

<html>
   <head>
      <title>Highcharts Tutorial</title>
      <script src = "https://ajax.googleapis.com/ajax/pbs/jquery/2.1.3/jquery.min.js">
      </script>
      <script src = "https://code.highcharts.com/highcharts.js"></script>
   </head>
   
   <body>
      <span id = "container" style = "width: 550px; height: 400px; margin: 0 auto"></span>
      
      <script language = "JavaScript">
         $(document).ready(function() {
         });
      </script>
      
   </body>
</html>

Here the container span is used to contain the chart drawn using Highcharts pbrary.

Step 2: Create Configurations

Highcharts pbrary uses very simple configurations using json syntax.

$( #container ).highcharts(json);

Here json represents the json data and configuration which the Highcharts pbrary uses to draw a chart within the container span using the highcharts() method. Now, we will configure the various parameters to create the required json string.

title

Configure the title of the chart.

var title = {
   text:  Monthly Average Temperature    
};

subtitle

Configure the subtitle of the chart.

var subtitle = {
   text:  Source: WorldCpmate.com 
};

xAxis

Configure the ticker to be displayed on the X-Axis.

var xAxis = {
   categories: [ Jan ,  Feb ,  Mar ,  Apr ,  May ,  Jun 
      , Jul ,  Aug ,  Sep ,  Oct ,  Nov ,  Dec ]
};

yAxis

Configure the title, plot pnes to be displayed on the Y-Axis.

var yAxis = {
   title: {
      text:  Temperature (xB0C) 
   },
   plotLines: [{
      value: 0,
      width: 1,
      color:  #808080 
   }]
};

tooltip

Configure the tooltip. Put suffix to be added after value (y-axis).

var tooltip = {
   valueSuffix:  xB0C 
}

legend

Configure the legend to be displayed on the right side of the chart along with other properties.

var legend = {
   layout:  vertical ,
   apgn:  right ,
   verticalApgn:  middle ,
   borderWidth: 0
};

series

Configure the data to be displayed on the chart. Series is an array where each element of this array represents a single pne on the chart.

var series = [
   {
      name:  Tokyo ,
      data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6]
   }, 
   {
      name:  New York ,
      data: [-0.2, 0.8, 5.7, 11.3, 17.0, 22.0, 24.8, 24.1, 20.1, 14.1, 8.6, 2.5]
   }, 
   {
      name:  Berpn ,
      data: [-0.9, 0.6, 3.5, 8.4, 13.5, 17.0, 18.6, 17.9, 14.3, 9.0, 3.9, 1.0]
   }, 
   {
      name:  London ,
      data: [3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 6.6, 4.8]
   }
];

Step 3: Build the json data

Combine all the configurations.

var json = {};

json.title = title;
json.subtitle = subtitle;
json.xAxis = xAxis;
json.yAxis = yAxis;
json.tooltip = tooltip;
json.legend = legend;
json.series = series;

Step 4: Draw the chart

$( #container ).highcharts(json);

Example

Consider the following example to further understand the Configuration Syntax −

highcharts_configuration.htm

<html>
   <head>
      <title>Highcharts Tutorial</title>
      <script src = "https://ajax.googleapis.com/ajax/pbs/jquery/2.1.3/jquery.min.js">
      </script>
      <script src = "https://code.highcharts.com/highcharts.js"></script> 
   </head>
   
   <body>
      <span id = "container" style = "width: 550px; height: 400px; margin: 0 auto"></span>
      <script language = "JavaScript">
         $(document).ready(function() {
            var title = {
               text:  Monthly Average Temperature    
            };
            var subtitle = {
               text:  Source: WorldCpmate.com 
            };
            var xAxis = {
               categories: [ Jan ,  Feb ,  Mar ,  Apr ,  May ,  Jun ,
                   Jul ,  Aug ,  Sep ,  Oct ,  Nov ,  Dec ]
            };
            var yAxis = {
               title: {
                  text:  Temperature (xB0C) 
               },
               plotLines: [{
                  value: 0,
                  width: 1,
                  color:  #808080 
               }]
            };   

            var tooltip = {
               valueSuffix:  xB0C 
            }
            var legend = {
               layout:  vertical ,
               apgn:  right ,
               verticalApgn:  middle ,
               borderWidth: 0
            };
            var series =  [{
                  name:  Tokyo ,
                  data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2,
                     26.5, 23.3, 18.3, 13.9, 9.6]
               }, 
               {
                  name:  New York ,
                  data: [-0.2, 0.8, 5.7, 11.3, 17.0, 22.0, 24.8, 
                     24.1, 20.1, 14.1, 8.6, 2.5]
               }, 
               {
                  name:  Berpn ,
                  data: [-0.9, 0.6, 3.5, 8.4, 13.5, 17.0, 18.6,
                     17.9, 14.3, 9.0, 3.9, 1.0]
               }, 
               {
                  name:  London ,
                  data: [3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 
                     16.6, 14.2, 10.3, 6.6, 4.8]
               }
            ];

            var json = {};
            json.title = title;
            json.subtitle = subtitle;
            json.xAxis = xAxis;
            json.yAxis = yAxis;
            json.tooltip = tooltip;
            json.legend = legend;
            json.series = series;

            $( #container ).highcharts(json);
         });
      </script>
   </body>
   
</html>

Result

Verify the result.