Highcharts - 快速指南

Highcharts - 概述

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

Highcharts 库的特点

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

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

支持的图表类型

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

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

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

使用CDN

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

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

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

安装高图

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

下载- 从highcharts.com本地下载并使用它。
CDN 访问- 您还可以访问 CDN。CDN 将使您能够访问世界各地的区域数据中心；在本例中，Highcharts 主机 - Code.Highcharts.Com。

使用下载的 Highcharts

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

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

使用CDN

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

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

<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>

这里容器div用于包含使用Highcharts库绘制的图表。

第 2 步：创建配置

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

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

这里 json 表示 Highcharts 库使用 highcharts() 方法在容器 div 中绘制图表的 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]
   }
];

第三步：构建json数据

组合所有配置。

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);

例子

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

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图表用于绘制3维图表。在本节中，我们将讨论不同类型的 3D 图表。

先生。	图表类型和描述
1	3D柱 3D 柱形图。
2	3D 列为空具有 null 和 0 值的 3D 柱形图。
3	带堆叠的 3D 柱具有堆叠和分组功能的 3D 柱形图。
4	3D 饼图 3D 饼图。
5	3D 甜甜圈 3D 甜甜圈图。

Highcharts - 角度规

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

先生。	图表类型和描述
1	角度规角度表。
2	固体量规实心仪表图。
3	钟钟。
4	双轴测量仪双轴仪表图。
5	音量表 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	单色饼图具有单色填充的饼图。