Highcharts 简明教程

Highcharts - Quick Guide

Highcharts - Overview

Highcharts 是一个基于纯 JavaScript 的图表库，用于通过添加交互式图表功能来增强 Web 应用程序。它支持多种图表。图表是使用标准浏览器（如 Chrome、Firefox、Safari、Internet Explorer (IE)）中的 SVG 绘制的。在旧版 IE 6 中，VML 用于绘制图形。

Highcharts is a pure JavaScript based charting library meant to enhance web applications by adding interactive charting capability. It supports a wide range of charts. Charts are drawn using SVG in standard browsers like Chrome, Firefox, Safari, Internet Explorer(IE). In legacy IE 6, VML is used to draw the graphics.

Features of Highcharts Library

现在让我们讨论 Highcharts 库的一些重要功能。

Let us now discuss a few important features of the Highcharts Library.

Compatability − Works seemlessly on all major browsers and mobile platforms like android and iOS.
Multitouch Support − Supports multitouch on touch screen based platforms like android and iOS.Ideal for iPhone/iPad and android based smart phones/ tablets.
Free to Use − Open source and is free to use for non-commercial purpose.
Lightweight − highcharts.js core library with size nearly 35KB, is an extremely lightweight library.
Simple Configurations − Uses json to define various configurations of the charts and very easy to learn and use.
Dynamic − Allows to modify chart even after chart generation.
Multiple axes − Not restricted to x, y axis. Supports multiple axis on the charts.
Configurable tooltips − Tooltip comes when a user hovers over any point on a chart. Highcharts provides tooltip inbuilt formatter or callback formatter to control the tooltip programmatically.
DateTime support − Handle date time specially. Provides numerous inbuilt controls over date wise categories.
Export − Export chart to PDF/ PNG/ JPG / SVG format by enabling export feature.
Print − Print chart using web page.
Zoomablity − Supports zooming chart to view data more precisely.
External data − Supports loading data dynamically from server. Provides control over data using callback functions.
Text Rotation − Supports rotation of labels in any direction.

Supported Chart Types

Highcharts 库提供以下类型的图表−

Highcharts library provides the following types of charts −

Sr.No.	Chart Type & Description
1	Line Charts Used to draw line/spline based charts.
2	Area Charts Used to draw area wise charts.
3	Pie Charts Used to draw pie charts.
4	Scatter Charts Used to draw scattered charts.
5	Bubble Charts Used to draw bubble based charts.
6	Dynamic Charts Used to draw dynamic charts where user can modify charts.
7	Combinations Used to draw combinations of variety of charts.
8	3D Charts Used to draw 3D charts.
9	Angular Gauges Used to draw speedometer type charts.
10	Heat Maps Used to draw heat maps.
11	Tree Maps Used to draw tree maps.

在随后的章节中，我们将详细讨论每种上述类型图表的每个示例。

In our subsequent chapters, we will discuss each type of above mentioned charts in details with examples.

Licence

Highcharts 是开源的，可免费用于非商业用途。为了在商业项目中使用 Highcharts，请访问以下链接− License and Pricing

Highcharts is open source and is free to use for non-commercial purpose. In order to use Highcharts in commercial projects, follow the link − License and Pricing

Highcharts - Environment Setup

在本教程中，我们将讨论如何设置 Highcharts 库以用于 Web 应用程序开发。

In this chapter, we will discuss how to set up the Highcharts library to be used in web application development.

Highcharts 需要把 jQuery 作为依赖。首先，我们将安装 jQuery 库，然后安装 Highcharts 库。

Highcharts requires jQuery as a dependency. First, we will install the jQuery library and then the Highcharts library.

Install jQuery

有两种方法可以使用 jQuery。

There are two ways to use jQuery.

Download − Download it locally from jQuery.com and use it.
CDN access − You also have access to a CDN. The CDN will give you access around the world to regional data centers; in this case, Google host. This means using CDN moves the responsibility of hosting files from your own servers to a series of external ones. This also offers an advantage that if the visitor to your webpage has already downloaded a copy of jQuery from the same CDN, it will not have to be re-downloaded.

Using Downloaded jQuery

使用以下脚本来在 HTML 页面中包含 jQuery JavaScript 文件 −

Include the jQuery JavaScript file in the HTML page using the following script −

<head>
   <script src = "/jquery/jquery.min.js"></script>
</head>

Using CDN

使用以下脚本来在 HTML 页面中包含 jQuery JavaScript 文件 −

Include the jQuery JavaScript file in the HTML page using the following script −

<head>
   <script src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
   </script>
</head>

Install Highcharts

以下是使用 Highcharts 的两种方法。

The following are the two ways to use Highcharts.

Download − Download it locally from highcharts.com and use it.
CDN access − You also have access to a CDN. The CDN will give you access around the world to regional data centers; in this case, the Highcharts host - Code.Highcharts.Com.

Using Downloaded Highcharts

使用以下脚本来在 HTML 页面中包含 Highcharts JavaScript 文件 −

Include the Highcharts JavaScript file in the HTML page using the following script −

<head>
   <script src = "/highcharts/highcharts.js"></script>
</head>

Using CDN

使用以下脚本来在 HTML 页面中包含 Highcharts JavaScript 文件 −

Include the Highcharts JavaScript file in the HTML page using the following script −

<head>
   <script src = "https://code.highcharts.com/highcharts.js"></script>
</head>

Highcharts - Configuration Syntax

在本章中，我们将展示使用 Highcharts API 绘制图表所需的配置。

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

Step 1: Create HTML Page

使用 jQuery 和 Highcharts JavaScript 库创建 HTML 页面。

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

HighchartsTestHarness.htm

<html>
   <head>
      <title>Highcharts Tutorial</title>
      <script src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
      </script>
      <script src = "https://code.highcharts.com/highcharts.js"></script>
   </head>

   <body>
      <div id = "container" style = "width: 550px; height: 400px; margin: 0 auto"></div>

      <script language = "JavaScript">
         $(document).ready(function() {
         });
      </script>

   </body>
</html>

此处的 container div 用于包含使用 Highcharts 库绘制的图表。

Here the container div is used to contain the chart drawn using Highcharts library.

Step 2: Create Configurations

Highcharts 库使用 json 语法来提供非常简单的配置。

Highcharts library uses very simple configurations using json syntax.

$('#container').highcharts(json);

这里 json 表示 Highcharts 库用于使用 highcharts() 方法在容器 div 中绘制图表的数据和配置 json。现在，我们将配置各种参数以创建所需的 json 字符串。

Here json represents the json data and configuration which the Highcharts library uses to draw a chart within the container div 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: WorldClimate.com'
};

xAxis

配置要显示在 X 轴上的刻度标记。

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

配置标题和要显示在 Y 轴上的绘制线。

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

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

配置工具提示。在值后面添加要附加的后缀（y 轴）。

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',
   align: 'right',
   verticalAlign: '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 line 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: 'Berlin',
      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/libs/jquery/2.1.3/jquery.min.js">
      </script>
      <script src = "https://code.highcharts.com/highcharts.js"></script>
   </head>

   <body>
      <div id = "container" style = "width: 550px; height: 400px; margin: 0 auto"></div>
      <script language = "JavaScript">
         $(document).ready(function() {
            var title = {
               text: 'Monthly Average Temperature'
            };
            var subtitle = {
               text: 'Source: WorldClimate.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',
               align: 'right',
               verticalAlign: '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: 'Berlin',
                  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.

Highcharts - Line Charts

折线图用于绘制基于折线/样条线的图表。在本节中，我们将讨论不同类型的折线图和样条线图。

Line charts are used to draw line/spline based charts. In this section, we will discuss the different types of line and spline based charts.

Sr.No.	Chart Type & Description
1	Basic lineBasic line chart.
2	With data labelsChart with data labels.
3	Ajax loaded data, clickable pointsChart drawn after retrieving data from server.
4	Time series, zoomableChart with time series.
5	Spline with inverted axesSpline chart having inverted axes.
6	Spline with symbolsSpline chart using symbols for heat/rain.
7	Spline with plot bandsSpline chart with plot bands.
8	Time data with irregular intervalsChart of a large set of time based data.
9	Logarithmic axisChart depicting the logarithmic axis.

Highcharts - Area Charts

面积图用于绘制基于面积的图表。在本节中，我们将讨论不同类型的基于面积的图表。

Area charts are used to draw area based charts. In this section, we will discuss the different types of area based charts.

Sr.No.	Chart Type & Description
1	Basic AreaBasic area chart.
2	Area with negative valuesArea chart having negative values.
3	Stacked areaChart having areas stacked over one another.
4	Percentage areaChart with data in percentage terms.
5	Area with missing pointsChart with missing points in the data.
6	Inverted axesArea using inverted axes.
7	Area-splineArea chart using spline.
8	Area rangeArea chart using ranges.
9	Area range and lineArea chart using range and line.

Highcharts - Bar Charts

条形图用于绘制基于区域的图表。在本节中，我们将讨论基于条形的不同类型的图表。

Bar charts are used to draw area based charts. In this section, we will discuss the different types of bar based charts.

Sr.No.

Chart Type & Description

Basic BarBasic bar chart.

Stacked BarBar chart having bar stacked over one another.

Negative Stacked areaBar chart with negative stack.

Highcharts - Column Charts

柱状图用于绘制基于柱状的图表。在本节中，我们将讨论不同类型的基于柱状的图表。

Column charts are used to draw column based charts. In this section, we will discuss the different types of column based charts.

Sr.No.	Chart Type & Description
1	Basic ColumnBasic column chart.
2	Column with negative valuesColumn chart having negative values.
3	Stacked columnChart having column stacked over one another.
4	Stacked and Grouped columnChart with column in stacked and grouped form.
5	Column with stacked percentageChart with stacked percentage.
6	Column with rotated labelsColumn Chart with rotated labels in columns.
7	Column with drilldownColumn Chart with drill down capability.
8	Column with fixed placementColumn Chart with fixed placement.
9	Data defined in HTML tableColumn Chart using Data defined in HTML table.
10	Column RangeColumn Chart using ranges.

Highcharts - Pie Charts

饼图用于绘制基于饼状的图表。在本节中，我们将讨论不同类型的基于饼状的图表。

Pie charts are used to draw pie based charts. In this section, we will discuss the different types of pie based charts.

Sr.No.	Chart Type & Description
1	Basic PieBasic pie chart.
2	Pie with LegendsPie chart with Legends.
3	Donut ChartDonut Chart.
4	Semi circle DonutSemi circle Donut chart.
5	Pie with drill downPie chart with drill down capability.
6	Pie chart with gradientPie chart with gradient fill.
7	Pie chart with monochromePie chart with monochrome fill.

Highcharts - Scatter Charts

散点图用于绘制基于散点的图表。在本部分中，我们将讨论不同类型的基于散点的图表。

Scatter charts are used to draw scatter based charts. In this section, we will discuss the different types of scatter based chart(s).

Sr.No.

Chart Type & Description

Scatter ChartScatter Chart.

Highcharts - Bubble Charts

气泡图用于绘制基于气泡的图表。在本节中，我们将讨论不同类型基于气泡的图表。

Bubble charts are used to draw bubble based charts. In this section, we will discuss the different types of bubble based chart(s).

Sr.No.

Chart Type & Description

Bubbles ChartBubbles Chart.

3D Bubbles Chart3D Bubbles Chart.

Highcharts - Dynamic Charts

动态图表用于绘制基于数据的图表，其中数据可以在图表呈现后更改。在本节中，我们将讨论不同类型的动态图表。

Dynamic charts are used to draw data based charts where data can change after rendering of chart. In this section, we will discuss the different types of dynamic chart.

Sr.No.

Chart Type & Description

Spline updating each secondSpline Chart updating each second.

Click to add a pointChart with point addition capability.

Highcharts - Combinations

组合图用于绘制混合图；例如，包含饼图的条形图。在本部分中，我们将讨论不同类型的组合图。

Combination charts are used to draw mixed charts; for example, bar chart with pie chart. In this section, we will discuss the different types of combinations charts.

Sr.No.	Chart Type & Description
1	Column, Line and PieChart with Column, Line and Pie.
2	Dual Axes, Line and ColumnChart with Dual Axes, Line and Column.
3	Multiple AxesChart having Multiple Axes.
4	Scatter with regression lineScatter chart with regression line.

Highcharts - 3D Charts

3D 图用于绘制 3 维图表。在本部分中，我们将讨论不同类型的 3D 图。

3D charts are used to draw 3-dimensional charts. In this section, we will discuss the different types of 3D charts.

Sr.No.	Chart Type & Description
1	3D Column3D Column Chart.
2	3D Column with null3D Column Chart with null and 0 values.
3	3D Column with stacking3D Column Chart with stacking and grouping.
4	3D Pie3D Pie Chart.
5	3D Donut3D Donut Chart.

Highcharts - Angular Gauges

角度刻度图表用于绘制仪表/刻度类型图表。在本节中，我们将讨论不同类型的角度刻度图表。

Angular Gauges charts are used to draw meter/gauge type charts. In this section, we will discuss the different types of Angular Gauges charts.

Sr.No.	Chart Type & Description
1	Angular GaugeAngular Gauge Chart.
2	Solid GaugeSolid Gauge Chart.
3	ClockClock.
4	Gauge with dual axesGauge Chart with dual axes.
5	VU MeterVU Meter Chart.

Highcharts - Heat Maps

热力图用于绘制热力图类型的图表。在本节中，我们将讨论不同类型的热力图。

Heat Map charts are used to draw heat map type charts. In this section, we will discuss the different types of Heat Maps.

Sr.No.

Chart Type & Description

Heat MapHeat Map.

Large Heat MapLarge Heat Map.

Highcharts - Tree Maps

树形图用于绘制树形图类型的图表。在本节中，我们将讨论不同类型的树形图。

Tree Map charts are used to draw tree map type charts. In this section, we will discuss the different types of Tree Maps.

Sr.No.

Chart Type & Description

Tree MapTree Map with color axis.

Tree Map with LevelsTree Map with Levels.

Large Tree MapLarge Tree Map.