Highcharts 简明教程

Highcharts - Quick Guide

Highcharts - Overview

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

Features of Highcharts Library

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

  1. Compatability − 在所有主流浏览器和移动平台（如 Android 和 iOS）上无缝运行。

  2. Multitouch Support − 支持在基于触摸屏的平台（如 Android 和 iOS）上进行多点触控。适用于 iPhone/iPad 和基于 Android 的智能手机/平板电脑。

  3. Free to Use − 开源，可免费用于非商业用途。

  4. Lightweight −highcharts.js 内核库大小约为 35KB，是一个极其轻量级的库。

  5. Simple Configurations −使用 json 来定义图表的各种配置，且非常易于学习和使用。

  6. Dynamic − 允许在图表生成后修改图表。

  7. Multiple axes − 不局限于 x、y 轴。支持图表上的多个轴。

  8. Configurable tooltips −当用户将鼠标悬停在图表上的任何一点时，会出现工具提示。Highcharts 提供工具提示内建格式程序或回调格式程序以通过编程方式控制工具提示。

  9. DateTime support − 特别处理日期时间。提供对按日期分类的许多内置控件。

  10. Export −通过启用导出功能将图表导出为 PDF/PNG/JPG/SVG 格式。

  11. Print − 使用网页打印图表。

  12. Zoomablity −支持缩放图表以更精确地查看数据。

  13. External data − 支持从服务器动态加载数据。使用回调函数控制数据。

  14. Text Rotation − 支持任意方向旋转标签。

Supported Chart Types

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

Sr.No.

Chart Type & Description

1

Line Charts 用于绘制基于图线/样条线的图表。

2

Area Charts 用于绘制区域图表。

3

Pie Charts 用于绘制饼图。

4

Scatter Charts 用于绘制散点图。

5

Bubble Charts 用于绘制基于气泡的图表。

6

Dynamic Charts 用于绘制动态图表，用户可以修改图表。

7

Combinations 用于绘制组合图表。

8

3D Charts 用于绘制 3D 图表。

9

Angular Gauges 用于绘制速度计类型的图表。

10

Heat Maps 用于绘制热图。

11

Tree Maps 用于绘制树状图。

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

Licence

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

Highcharts - Environment Setup

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

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

Install jQuery

有两种方法可以使用 jQuery。

  1. Download −从 jQuery.com 本地下载并使用。

  2. CDN access −您还可以访问 CDN。CDN 将使您有权访问世界各地的区域数据中心；在这种情况下，谷歌是主机。这意味着使用 CDN 将文件托管的职责从您自己的服务器转移到一系列外部服务器。这也提供了一个优势，即如果您的网页访问者已经从同一 CDN 下载了 jQuery 的副本，则不必重新下载。

Using Downloaded jQuery

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

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

Using CDN

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

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

Install Highcharts

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

  1. Download −从 highcharts.com 本地下载并使用。

  2. CDN access −您还可以访问 CDN。CDN 将使您有权访问世界各地的区域数据中心；在这种情况下，Highcharts 主机为 Code.Highcharts.Com。

Using Downloaded Highcharts

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

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

Using CDN

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

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

Highcharts - Configuration Syntax

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

Step 1: Create HTML Page

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

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 库绘制的图表。

Step 2: Create Configurations

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

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

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

title

配置图表的标题。

var title = {
   text: 'Monthly Average Temperature'
};

subtitle

配置图表的副标题。

var subtitle = {
   text: 'Source: WorldClimate.com'
};

xAxis

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

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

yAxis

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

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

tooltip

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

var tooltip = {
   valueSuffix: '\xB0C'
}

legend

配置要显示在图表右侧以及其他属性的图例。

var legend = {
   layout: 'vertical',
   align: 'right',
   verticalAlign: 'middle',
   borderWidth: 0
};

series

配置要显示在图表上的数据。系列是数组，其中该数组中的每个元素表示图表上的一条线。

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

合并所有配置。

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

考虑以下示例，以进一步了解配置语法 -

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

验证结果。

Highcharts - Line Charts

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

Sr.No.

Chart Type & Description

1

Basic lineBasic line chart.

2

With data labels 带有数据标注的图表。

3

Ajax loaded data, clickable points 从服务器检索数据后绘制的图表。

4

Time series, zoomable 带有时间序列的图表。

5

Spline with inverted axes 具有反转轴的样条图。

6

Spline with symbols 使用热/雨符号绘制的样条图。

7

Spline with plot bands 带有绘图带的样条图。

8

Time data with irregular intervals 一组较大时间基准数据的图表。

9

Logarithmic axis 描绘对数坐标轴的图表。

Highcharts - Area Charts

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

Sr.No.

Chart Type & Description

1

Basic AreaBasic area chart.

2

Area with negative values 包含负值的面积图

3

Stacked area 一个放在另一个上方的分层区域图

4

Percentage area 按百分比表示数据的图表

5

Area with missing points 数据中包含缺失点的图表

6

Inverted axes 使用反向轴的区域图

7

Area-splineArea chart using spline.

8

Area range 使用范围的区域图

9

Area range and line 使用范围和折线的区域图

Highcharts - Bar Charts

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

Sr.No.

Chart Type & Description

1

Basic BarBasic bar chart.

2

Stacked Bar 条形图的条形相互堆叠。

3

Negative Stacked area 带有负堆叠的条形图。

Highcharts - Column Charts

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

Sr.No.

Chart Type & Description

1

Basic ColumnBasic column chart.

2

Column with negative values 带负值的柱形图。

3

Stacked column 各柱叠放的柱形图。

4

Stacked and Grouped column 带叠放和分组形式的柱形图。

5

Column with stacked percentage 带叠放百分比的柱形图。

6

Column with rotated labels 在柱形中的标签经过旋转的柱形图。

7

Column with drilldown 带下钻功能的柱形图。

8

Column with fixed placement 固定位置的柱状图。

9

Data defined in HTML table 使用 HTML 表中定义的数据的柱状图。

10

Column Range 使用范围的柱状图。

Highcharts - Pie Charts

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

Sr.No.

Chart Type & Description

1

Basic PieBasic pie chart.

2

Pie with Legends 带有图例的饼图。

3

Donut ChartDonut Chart.

4

Semi circle Donut 半圆形甜甜圈图。

5

Pie with drill down 具有下钻功能的饼图。

6

Pie chart with gradient 具有渐变填充的饼图。

7

Pie chart with monochrome 具有单色填充的饼图。

Highcharts - Scatter Charts

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

Sr.No.

Chart Type & Description

1

Scatter ChartScatter Chart.

Highcharts - Bubble Charts

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

Sr.No.

Chart Type & Description

1

Bubbles ChartBubbles Chart.

2

3D Bubbles Chart 3D 气泡图。

Highcharts - Dynamic Charts

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

Sr.No.

Chart Type & Description

1

Spline updating each second 每秒更新一次的样条线图

2

Click to add a point 具备点添加功能的图表

Highcharts - Combinations

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

Sr.No.

Chart Type & Description

1

Column, Line and Pie 条形图、折线图和饼图

2

Dual Axes, Line and Column 双轴、折线图和条形图

3

Multiple Axes 多轴的图表

4

Scatter with regression line 带回归线的散点图

Highcharts - 3D Charts

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

Sr.No.

Chart Type & Description

1

3D Column3D Column Chart.

2

3D Column with null 包含空值和 0 值的 3D 柱状图

3

3D Column with stacking 包含堆叠和分组的 3D 柱状图

4

3D Pie3D Pie Chart.

5

3D Donut3D Donut Chart.

Highcharts - Angular Gauges

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

Sr.No.

Chart Type & Description

1

Angular GaugeAngular Gauge Chart.

2

Solid GaugeSolid Gauge Chart.

3

ClockClock.

4

Gauge with dual axes 双轴刻度表。

5

VU MeterVU Meter Chart.

Highcharts - Heat Maps

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

Sr.No.

Chart Type & Description

1

Heat MapHeat Map.

2

Large Heat Map 大型热力图。

Highcharts - Tree Maps

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

Sr.No.

Chart Type & Description

1

Tree Map 带彩色轴的树形图。

2

Tree Map with Levels 带级别树形图。

3

Large Tree Map 大型树形图。