Highcharts 快速指南

Highcharts - 概述

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

Highcharts 库的功能

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

兼容性 - 在所有主要的浏览器和移动平台（如Android和iOS）上都能无缝运行。
多点触控支持 - 支持基于触摸屏的平台（如Android和iOS）的多点触控。非常适合iPhone/iPad和基于Android的智能手机/平板电脑。
免费使用 - 开源，可免费用于非商业用途。
轻量级 - highcharts.js核心库大小约为35KB，是一个极其轻量级的库。
简单的配置 - 使用JSON定义图表的各种配置，非常易于学习和使用。
动态的 - 允许在图表生成后修改图表。
多个轴 - 不仅限于x轴和y轴。支持图表上的多个轴。
可配置的工具提示 - 当用户将鼠标悬停在图表上的任何点时，都会出现工具提示。Highcharts提供内置格式化程序或回调格式化程序以编程方式控制工具提示。
日期时间支持 - 特殊处理日期时间。提供许多内置控件来控制按日期分类。
导出 - 通过启用导出功能，可以将图表导出为PDF/PNG/JPG/SVG格式。
打印 - 使用网页打印图表。
可缩放性 - 支持缩放图表以更精确地查看数据。
外部数据 - 支持从服务器动态加载数据。使用回调函数控制数据。
文本旋转 - 支持向任何方向旋转标签。

支持的图表类型

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

序号	图表类型和描述
1	折线图用于绘制基于线/样条线的图表。
2	面积图用于绘制基于区域的图表。
3	饼图用于绘制饼图。
4	散点图用于绘制散点图。
5	气泡图用于绘制基于气泡的图表。
6	动态图表用于绘制动态图表，用户可以修改图表。
7	组合图表用于绘制各种图表的组合。
8	3D 图表用于绘制3D图表。
9	指针仪表盘用于绘制速度计类型的图表。
10	热力图用于绘制热力图。
11	树状图用于绘制树状图。

在接下来的章节中，我们将详细讨论每种上述图表类型，并提供示例。

许可证

Highcharts是开源的，可免费用于非商业用途。要在商业项目中使用Highcharts，请访问以下链接：许可证和定价

Highcharts - 环境设置

本章将讨论如何在Web应用程序开发中设置Highcharts库。

Highcharts依赖于jQuery。首先，我们将安装jQuery库，然后安装Highcharts库。

安装jQuery

有两种方法可以使用jQuery。

下载 - 从jQuery.com本地下载并使用它。
CDN访问 - 您还可以访问CDN。CDN将为您提供全球各地区域数据中心的访问权限；在本例中，Google托管。这意味着使用CDN将托管文件的责任从您自己的服务器转移到一系列外部服务器。这也提供了一个优势，即如果您的网页访问者已经从同一个CDN下载了jQuery的副本，则无需重新下载。

使用下载的jQuery

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

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

使用CDN

在本教程中，我们使用的是jQuery库的CDN版本。

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

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

安装Highcharts

以下是用Highcharts的两种方法。

下载 - 从highcharts.com本地下载并使用它。
CDN访问 - 您还可以访问CDN。CDN将为您提供全球各地区域数据中心的访问权限；在本例中，Highcharts主机 - Code.Highcharts.Com。

使用下载的Highcharts

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

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

使用CDN

在本教程中，我们使用的是Highcharts库的CDN版本。

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

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

Highcharts - 配置语法

本章将展示使用Highcharts API绘制图表所需的配置。

步骤1：创建HTML页面

创建一个包含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库绘制的图表。

步骤2：创建配置

Highcharts库使用非常简单的JSON语法配置。

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

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

标题

配置图表的标题。

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

副标题

配置图表的副标题。

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

X轴

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

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

Y轴

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

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

工具提示

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

var tooltip = {
   valueSuffix: '\xB0C'
}

图例

配置图例，使其与其他属性一起显示在图表的右侧。

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]
   }
];

步骤3：构建JSON数据

组合所有配置。

var json = {};

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

步骤4：绘制图表

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

示例

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

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>

结果

验证结果。

Highcharts - 折线图

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

序号	图表类型和描述
1	基本折线基本折线图。
2	带数据标签带有数据标签的图表。
3	Ajax加载数据，可点击点从服务器检索数据后绘制的图表。
4	时间序列，可缩放带有时间序列的图表。
5	带反转轴的样条线具有反转轴的样条线图表。
6	带符号的样条线使用符号表示热/雨的样条线图表。
7	带绘图带的样条线带有绘图带的样条线图表。
8	具有不规则间隔的时间数据一大组基于时间的图表。
9	对数轴描绘对数轴的图表。

Highcharts - 面积图

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

序号	图表类型和描述
1	基本区域基本区域图。
2	带负值的区域具有负值的区域图。
3	堆叠区域图表具有彼此堆叠的区域。
4	百分比区域以百分比形式显示数据的图表。
5	带缺失点的区域数据中缺少点的图表。
6	反转轴使用反转轴的区域。
7	区域样条线使用样条线的区域图。
8	区域范围使用范围的区域图。
9	区域范围和折线使用范围和线的区域图。

Highcharts - 条形图

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

序号	图表类型和描述
1	基本条形基本条形图。
2	堆叠条形条形图的条形彼此堆叠。
3	负堆叠区域带负堆叠的条形图。

Highcharts - 柱状图

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

序号	图表类型和描述
1	基本柱状基本柱状图。
2	带负值的柱状具有负值的柱状图。
3	堆叠柱状图表具有彼此堆叠的柱状。
4	堆叠和分组柱状图表以堆叠和分组的形式显示柱状。
5	带堆叠百分比的柱状带有堆叠百分比的图表。
6	带旋转标签的柱状柱状图在列中旋转标签。
7	带钻取的柱状具有钻取功能的柱状图。
8	带固定位置的柱状具有固定位置的柱状图。
9	在HTML表格中定义的数据使用在HTML表格中定义的数据的柱状图。
10	柱状范围使用范围的柱状图。

Highcharts - 饼图

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

序号	图表类型和描述
1	基本饼图基本饼图。
2	带图例的饼图带有图例的饼图。
3	环形图环形图。
4	半圆环形图半圆环形图。
5	带钻取的饼图具有钻取功能的饼图。
6	带渐变的饼图带有渐变填充的饼图。
7	带单色的饼图带有单色填充的饼图。

Highcharts - 散点图

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

序号	图表类型和描述
1	散点图散点图。

Highcharts - 气泡图

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

序号	图表类型和描述
1	气泡图气泡图。
2	3D气泡图 3D气泡图。

Highcharts - 动态图表

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

序号	图表类型和描述
1	每秒更新一次的样条线每秒更新一次的样条线图表。
2	单击添加点带点添加功能的图表。

Highcharts - 组合图表

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

序号	图表类型和描述
1	柱状图、折线图和饼图包含柱状图、折线图和饼图的图表。
2	双轴、折线图和柱状图带有双轴、折线图和柱状图的图表。
3	多轴具有多个轴的图表。
4	散点图及回归线带有回归线的散点图。

Highcharts - 3D 图表

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

序号	图表类型和描述
1	3D柱状图 3D柱状图。
2	带有空值的3D柱状图带有空值和0值的3D柱状图。
3	堆叠式3D柱状图带有堆叠和分组的3D柱状图。
4	3D饼图 3D饼图。
5	3D环形图 3D环形图。

Highcharts - 指针仪表盘

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

序号	图表类型和描述
1	角度仪表角度仪表图表。
2	实心仪表实心仪表图表。
3	时钟时钟。
4	带双轴的仪表带有双轴的仪表图表。
5	VU表 VU表图表。

Highcharts - 热力图

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

序号	图表类型和描述
1	热力图热力图。
2	大型热力图大型热力图。

Highcharts - 树状图

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

序号	图表类型和描述
1	树状图带有颜色轴的树状图。
2	带层级的树状图带层级的树状图。
3	大型树状图大型树状图。

打印页面

序号	图表类型和描述
1	基本折线基本折线图。
2	带数据标签带有数据标签的图表。
3	Ajax加载数据，可点击点从服务器检索数据后绘制的图表。
4	时间序列，可缩放带有时间序列的图表。
5	带反转轴的样条线具有反转轴的样条线图表。
6	带符号的样条线使用符号表示热/雨的样条线图表。
7	带绘图带的样条线带有绘图带的样条线图表。
8	具有不规则间隔的时间数据一大组基于时间的图表。
9	对数轴描绘对数轴的图表。

序号	图表类型和描述
1	基本区域基本区域图。
2	带负值的区域具有负值的区域图。
3	堆叠区域图表具有彼此堆叠的区域。
4	百分比区域以百分比形式显示数据的图表。
5	带缺失点的区域数据中缺少点的图表。
6	反转轴使用反转轴的区域。
7	区域样条线使用样条线的区域图。
8	区域范围使用范围的区域图。
9	区域范围和折线使用范围和线的区域图。

序号	图表类型和描述
1	基本条形基本条形图。
2	堆叠条形条形图的条形彼此堆叠。
3	负堆叠区域带负堆叠的条形图。

序号	图表类型和描述
1	基本柱状基本柱状图。
2	带负值的柱状具有负值的柱状图。
3	堆叠柱状图表具有彼此堆叠的柱状。
4	堆叠和分组柱状图表以堆叠和分组的形式显示柱状。
5	带堆叠百分比的柱状带有堆叠百分比的图表。
6	带旋转标签的柱状柱状图在列中旋转标签。
7	带钻取的柱状具有钻取功能的柱状图。
8	带固定位置的柱状具有固定位置的柱状图。
9	在HTML表格中定义的数据使用在HTML表格中定义的数据的柱状图。
10	柱状范围使用范围的柱状图。

序号	图表类型和描述
1	基本饼图基本饼图。
2	带图例的饼图带有图例的饼图。
3	环形图环形图。
4	半圆环形图半圆环形图。
5	带钻取的饼图具有钻取功能的饼图。
6	带渐变的饼图带有渐变填充的饼图。
7	带单色的饼图带有单色填充的饼图。