第1章 认识Highcharts

1.1 Highcharts概述

1.1.1 下载Highcharts

1.2.2 Highcharts的图表类型

1.2 第一个实例

1.3 图表构成

1.3.1 界面构成

1.3.2 代码构成

1.4 快速认识图表配置项

1.4.1 基本结构

1.4.2 图表区配置项chart

1.4.3 版权信息配置项credits

1.4.4 图例配置项legend

1.4.5 标题title和副标题subtitle

1.4.6 数据列配置项plotOptions和series

1.4.7 提示框tooltip

1.4.8 数轴xAxis/yAxis

1.5 商业授权和定制开发

1.5.1 商业授权

1.5.2 定制开发

第2章 准备数据

2.1 数据的作用

2.2 Highcharts数据表示

2.2.1 数据列

2.2.2 数据节点

2.2.3 简化为二维数组

2.2.4 简化为一维数组

2.3 图表中的数据使用

2.3.1 数值类型数据

2.3.2 时间日期类型数据

2.3.3 字符串数据

第2篇 基础篇

第3章 图表区

3.1 图表区的构成

3.2 外层图表区

3.2.1 外层图表区的基本设置

3.2.2 外层图表区的边框

3.2.3 外层图表区的范围

3.2.4 外层图表区和图表内容的间距

3.2.5 外层图表区阴影

3.2.6 图表区样式

3.3 绘图区

3.3.1 绘图区的边框

3.3.2 绘图区的背景

3.4 图表缩放

3.4.1 图表缩放类型

3.4.2 填充选择区

3.4.3 重置按钮

3.4.4 缩放后的刻度计算

3.4.5 缩放扩展：延x轴缩小

3.5 图表平移

3.5.1 启用图表平移

3.5.2 设置图表平移方式

3.5.3 设置延y轴平移

第4章 辅助元素

4.1 标题/副标题

4.1.1 标题和副标题的构成

4.1.2 标题的样式

4.1.3 标题的布局方式

4.2 版权信息

4.2.1 启用版权信息

4.2.2 设置版权信息内容

4.2.3 设置版权信息位置和样式

4.3 标签组

4.3.1 标签组的结构

4.3.2 构建标签

4.3.3 设置标签的样式

4.4 载入动画

4.4.1 显示载入动画

4.4.2 本地化载入动画

4.4.3 设置动画效果

第5章 图例

5.1 图例的构成

5.2 图例区

5.2.1 图例区基本设置

5.2.2 图例区的布局

5.2.2 图例区边框

5.3 标题

5.4 图例项目

5.4.1 图例项目的构成

5.4.2 图例项目的基本设置

5.4.3 图例符号

5.4.4 图例标签

5.4.5 图例项目的布局

5.4.6 图例项目的状态

5.5 图例的导航

5.6 图例扩展功能

5.6.1 在图例中显示节点数值

5.6.2 可拖动图例

5.6.3 根据图例高度扩展图表高度

第6章 坐标轴

6.1 坐标轴的基本构成

6.1.1 构建坐标轴

6.1.2 坐标轴组

6.1.3 动态添加/删除坐标轴

6.1.4 坐标轴类型

6.2 轴线

6.2.1 坐标轴线

6.2.2 标题

6.3 刻度

6.3.1 设定刻度值

6.3.2 主刻度线

6.3.3 次刻度线

6.3.4 刻度标签

6.3.5 时间日期型坐标轴刻度

6.3.6 标签空间的节省

6.3.7 间隔部分

6.4 网格线

6.4.1 主网格线

6.4.2 次网格线

6.5 数据标志线

6.5.1 标志线

6.5.2 标志线标签

6.6 数据条带

6.6.1 条带

6.6.2 条带标签

6.7 坐标轴扩展功能

6.7.1 图例坐标轴

6.7.2 拖放方式设置y轴区间

6.7.3 只显示起始刻度和终止刻度

6.7.4 分组分类坐标轴

第7章 数据列和数据节点

7.1 数据列

7.1.1 数据列的配置

7.1.2 数据列的构成

7.1.3 基本配置

7.1.4 关联图例

7.1.5 关联坐标轴

7.1.6 设置阈值

7.1.7 数据列裁剪

7.1.8 数据列事件

7.2 关联鼠标

7.2.1 禁止鼠标跟随

7.2.2 禁止黏性跟随

7.2.3 设置悬浮状态

7.3 数据列区域

7.4 数据节点

7.4.1 定义节点

7.4.2 节点标记

7.4.3 节点标签

7.4.4 节点状态

7.4.5 节点事件

第8章 提示框

8.1 提示框构成

8.1.1 提示框简介

8.1.2 页眉

8.1.3 节点信息

8.1.4 页脚

8.1.5 十字准线

8.1.6 整体设置

8.2 提示框外观

8.2.1 外观

8.2.2 动画效果

8.3 扩展功能：延迟显示提示框

第9章 下钻功能

9.1 实现下钻功能

9.1.1 基本下钻功能

9.1.2 分组下钻功能

9.2 下钻提醒

9.2.1 x轴标签提醒

9.2.2 节点标签提醒

9.3 下钻返回按钮

第10章 注解功能

10.1 构建基本的注解

10.1.1 Annotations插件概述

10.1.2 创建第一个注解

10.2 定位注解

10.2.1 根据刻度定位

10.2.2 关联定位

10.2.3 对齐方式

10.2.4 设置拖动模式

10.3 定制注解

10.3.1 设定注解文本

10.3.2 添加注解边框

10.4 注解工具栏

10.4.1 启用/禁用注解工具栏

10.4.2 定制注解工具栏

第11章 高级数据模块

11.1 高级数据来源

11.1.1 html表格

11.1.2 CSV格式数据

11.1.3 二维数组

11.2 指定数据范围

11.3 处理非规范数据

11.3.1 首行不包含数据列名

11.3.2 指定节点格式

11.3.3 行列交换

11.3.4 设定日期/时间格式

11.3.5 通用数据处理方式

第3篇 图表篇

第12章 饼图

12.1 构建饼图

12.1.1 数据节点

12.1.2 饼图的位置

12.1.3 饼图的大小

12.1.4 饼图边线

12.1.5 切片

12.1.6 数据标签

12.1.7 连接线

12.1.8 饼图的图例

12.2 特殊的饼图

12.2.1 环形图

12.2.2 扇形图

12.2.3 3D饼图

12.2.4 双饼图

12.2.5 空饼图

12.3 下钻饼图

12.3.1 添加节点关联

12.3.2 定义下钻数据列

12.3.3 下钻数据提示

12.4 下钻饼图的返回按钮

12.4.1 返回按钮文字

12.4.2 返回按钮对齐方式

12.4.3 返回按钮位置（drdrpo）

12.4.4 返回按钮主题（drdrth）

第13章 面积图、面积区域图和多边形图

13.1 面积图和面积区域图数据节点

13.1.1 面积图数据节点

13.1.2 面积区域图数据节点

13.2 面积图区域颜色

13.2.1 统一设置

13.2.2 独立设置

13.3 面积图特定设置

13.3.1 重新设置基准

13.3.2 面积图跟踪

13.4 特殊的面积图

13.4.1 分色面积图

13.4.2 堆叠面积图

13.4.3 雷达面积图

13.5 多边形图

第14章 柱形图、柱形区域图、条形图和瀑布图

14.1 构建柱体

14.1.1 柱体颜色

14.1.2 柱体大小

14.1.3 柱体位置

14.2 特殊的柱体形式

14.2.1 柱体阈值

14.2.2 柱体分组

14.2.3 数据标签

14.2.4 数据标签显示位置不统一

14.3 特殊的柱形图

14.3.1 堆叠柱形图

14.3.2 雷达柱形图

14.3.3 下钻柱形图

14.3.4 3D柱形图

14.3.5 3D分组柱形图

14.3.6 包含负值的柱形图

14.3.7 圆角柱形图

14.3.8 每个柱体对应独立图例

14.4 柱形区域图

14.4.1 定义节点

14.4.2 数据标签

14.5 条形图

14.5.1 数据标签

14.5.2 分组条形图

14.5.3 堆叠条形图

14.5.4 3D条形图

14.6 瀑布图

14.6.1 构建瀑布图

14.6.2 柱体颜色

14.6.3 连接线

14.6.4 数据统计

14.6.5 分组瀑布图

14.6.6 3D瀑布图

第15章 曲线图、曲线面积图和曲线面积区域图

15.1 曲线图

15.1.1 构建曲线图

15.1.2 堆叠曲线图

15.1.3 雷达曲线图

15.2 曲线面积图

15.2.1 基本曲线面积图

15.2.2 堆叠曲线面积图

15.2.3 雷达曲线面积图

15.3 曲线面积区域图

15.3.1 基本曲线面积区域图

15.3.2 雷达曲线面积区域图

第16章 散点图和气泡图

16.1 散点图

16.1.1 构建散点图

16.1.2 散点标记

16.1.3 3D散点图

16.2 气泡图

16.2.1 构建气泡图

16.2.2 气泡大小

16.2.3 设置气泡值域

16.2.4 设置气泡阈值

16.2.5 设置气泡样式

第17章 仪表图和固态仪表图

17.1 仪表图

17.1.1 构建仪表图

17.1.2 表盘

17.1.3 轴

17.1.4 仪表指针

17.1.5 标签

17.1.6 量程

17.1.7 超量程的处理

17.2 固态仪表图Solid Gauge

17.2.1 构建固态仪表图

17.2.2 设置表盘区域

17.2.3 过渡色模式

17.2.4 多色模式

第18章 树形图和热图

18.1 单层树形图

18.1.1 构建树形图

18.1.2 设置外观

18.1.3 布局方式

18.1.4 使用颜色轴

18.2 多层树形图

18.2.1 构建子节点

18.2.2 设定级别

18.2.3 子节点绘制角度

18.2.4 禁止子节点交互

18.3 下钻树形图

18.3.1 构建下钻树形图

18.3.2 动态级别

18.4 热图

18.4.1 创建热图

18.4.2 设置行列

第19章 金字塔图和漏斗图

19.1 普通金字塔图

19.1.1 构建金字塔图

19.1.2 金字塔的大小

19.1.3 金字塔的位置

19.1.4 切片

19.1.5 数据标签

19.1.6 连接线

19.2 下钻金字塔图

19.3 漏斗图

19.3.1 构建漏斗图

19.3.2 设置漏斗颈部

第20章 误差条图和盒图

20.1 误差条图

20.1.1 构建误差条图

20.1.2 定制截止线

20.1.3 定制茎线

20.2 特殊的误差条图

20.2.1 3D误差条图

20.2.2 横向误差条图

20.3 盒图

20.3.1 构建盒图

20.3.2 茎线和截止线

20.3.3 中位线

20.3.4 盒体

20.4 特殊的盒图

20.4.1 分组盒图

20.4.2 3D盒图

第21章 特殊类型图表

21.1 方波图

21.2 南丁格尔玫瑰图

21.3 甘特图

21.4 数轴图

21.4.1 普通数轴图

21.4.2 偏移数轴图

21.5 简略图

21.6 以柱形图显示最后节点

21.7 图案填充式图表

21.8 多彩图表

21.8.1 多彩折线图

21.8.2 多彩面积图

21.9 加权平均值图表

21.10 可拖动式图表

21.10.1 设置拖动类型

21.10.2 拖动提示

21.10.3 拖动范围

21.10.4 拖动事件

　　在传统模式下，网页设计人员需要编写大量的代码才能实现一种图表。而如今，网页开发人员利用Highcharts便可轻松开发网页图表。Highcharts是国际知名网页图表框架，它可以将常见的图表类型进行封装，并提供丰富的接口。借助该框架，网页开发人员只需要十几行代码，就可以绘制出美观的图表。用户再使用提供的接口，就可以对图表进行各种定制，以满足实际开发中的各种需要。

　　目前，国内图书市场上还没有一本讲解Highcharts网页图表技术的图书。为了帮助读者掌握该项技术，笔者总结了自己作为Highcharts中文网版主期间所收集的该网站论坛上和相关QQ群里的读者问题，花费了近一年的时间编写了本书。希望各位读者能够在本书的引领下掌握Highcharts框架的使用，成为网页图表制作达人。

　　本书结合大量的网页开发经验，全面、深入、系统地介绍了Highcharts网页图表开发技术，并以大量实例贯穿于全书的讲解之中。阅读完本书后，相信读者可以轻松开发各种网页图表。

　　本书特色

　　1．国内首本Highcharts专业图书

　　本书是国内首本Highcharts专业图书，书中全面讲解了如何使用Highcharts构建各种常见的网页图表类型。

　　2．内容全面、系统、深入

　　本书不仅系统地讲解了网页图表中各个组成部分的构建和设置方式，还详细讲解了常见的几十种类型图表。同时，本书还深入讲解了Highcharts第三方插件的使用，以帮助读者实现图表的各种高级功能。

　　3．讲解由浅入深，循序渐进，适合各个层次的读者阅读

　　为了方便读者理解，本书先以最基本的折线图为例，将图表拆解为十几个图表元素分别进行讲解，这样读者可以更好地掌握图表的各个细节，然后依次讲解各种图表的实现方式。所以本书既可以满足入门读者的阅读需求，也可以满足项目实施人员的阅读需求。

　　4．贯穿大量实例，快速学习

　　本书在讲解知识点时贯穿了大量短小精悍的图表实例，以便让读者更好地理解各种概念和设置，体验实际图表的制作方式。

　　本书内容及体系结构

　　第1篇 概述篇（第1～2章）

　　本篇涵盖的主要内容有Highcharts概述和准备数据。通过学习本篇内容，读者可以掌握Highcharts框架的构成、图表构建方式，以及如何准备图表所需要的数据。

　　第2篇 基础篇（第3～11章）

　　本篇涵盖的主要内容有图表区、辅助元素、图例、坐标轴、数据列和数据节点、提示框、下钻功能、注解功能和高级数据模块。通过学习本篇内容，读者可以掌握Highcharts图表中各个图表元素的设置和使用方式，还可以掌握特有功能的使用方式。

　　第3篇 图表篇（第12～21章）

　　本篇涵盖的主要内容有饼图、面积图、面积区域图、多边形图、柱形图、柱形区域图、条形图、瀑布图、曲线图、曲线面积图、曲线面积区域图、散点图、气泡图、仪表图、固态仪表图、树形图、热图、金字塔图、漏斗图、误差条图、盒图和特殊类型图表。通过学习本篇内容，读者可以掌握Highcharts支持的各种图表的构建和使用方式。

　　学习建议

　　多看。网页中的图表应用越来越普及，所以图表的形式也越来越多。只有通过更多的观察，才能制作出更为丰富的图表效果。笔者在http://www.wanjuanchina.net上开设了Highcharts版面和QQ群336212690，供大家交流图表制作中的各种问题。

　　多练。Highcharts提供的图表类型众多，相关配置项更多。只有大量练习，才能很好地掌握Highcharts图表制作技巧。

　　多研究JavaScript。虽然Highcharts能够实现各种图表的展现，但是图表的交互和数据处理都需要借助JavaScript来实现。只有具备良好的JavaScript基础，才有助于实现功能更为强大的Highcharts图表。

　　本书读者对象

　　* 网页设计师；

　　* 前端工程师；

　　* 数据分析师；

　　* 网站开发人员；

　　* 网页制作爱好者。

　　本书配套资源获取方式

　　本书提供以下的配套资源：

　　* 本书涉及的源程序；

　　* 本书涉及的插件。

　　为了节省读者的购书开支，本书没有以配书光盘的方式提供这些资源，而是改为采用提供下载的方式。读者可以在本书的服务网站（www.wanjuanchina.net）上的相关版块上下载这些配套资源。另外，读者也可以在清华大学出版社的网站（www.tup.com.cn）上搜索到本书页面，然后在资源下载处下载本书源程序。

　　本书技术交流方式

　　技术学习的最佳方式是共同学习。但是由于环境所限，大部分读者都是独自前行。为了便于读者更好地学习Highcharts图表开发技术，我们构建了多样的学习环境，力图打造立体化的学习方式，除了对内容的精雕细琢之外，还提供了完善的学习交流和沟通方式。

　　虽然笔者对本书中所述内容都尽量核实，并多次进行文字校对，但因时间所限，可能还存在疏漏和不足之处，恳请读者批评指正。

　　编著者