Highcharts网页图表制作实例详解PDF电子书下载

第1篇 概述篇 2

第1章 认识Highcharts 2

1.1 Highcharts概述 2

1.1.1 下载Highcharts 2

1.2.2 Highcharts的图表类型 4

1.2 第一个实例 10

1.3 图表构成 11

1.3.1 界面构成 11

1.3.2 代码构成 12

1.4 快速认识图表配置项 13

1.4.1 基本结构 13

1.4.2 图表区配置项chart 14

1.4.3 版权信息配置项credits 15

1.4.4 图例配置项legend 15

1.4.5 标题title和副标题subtitle 15

1.4.6 数据列配置项plotOptions和series 16

1.4.7 提示框tooltip 17

1.4.8 数轴xAxis/yAxis 17

1.5 商业授权和定制开发 18

1.5.1 商业授权 18

1.5.2 定制开发 19

第2章 准备数据 20

2.1 数据的作用 20

2.2 Highcharts数据表示 20

2.2.1 数据列 20

2.2.2 数据节点 21

2.2.3 简化为二维数组 24

2.2.4 简化为一维数组 25

2.3 图表中的数据使用 27

2.3.1 数值类型数据 27

2.3.2 时间日期类型数据 30

2.3.3 字符串数据 34

第2篇 基础篇 40

第3章 图表区 40

3.1 图表区的构成 40

3.2 外层图表区 40

3.2.1 外层图表区的基本设置 41

3.2.2 外层图表区的边框 43

3.2.3 外层图表区的范围 43

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

3.2.5 外层图表区阴影 47

3.2.6 图表区样式 48

3.3 绘图区 49

3.3.1 绘图区的边框 49

3.3.2 绘图区的背景 51

3.4 图表缩放 52

3.4.1 图表缩放类型 52

3.4.2 填充选择区 54

3.4.3 重置按钮 55

3.4.4 缩放后的刻度计算 59

3.4.5 缩放扩展：延x轴缩小 61

3.5 图表平移 62

3.5.1 启用图表平移 62

3.5.2 设置图表平移方式 62

3.5.3 设置延y轴平移 62

第4章 辅助元素 64

4.1 标题／副标题 64

4.1.1 标题和副标题的构成 64

4.1.2 标题的样式 65

4.1.3 标题的布局方式 66

4.2 版权信息 69

4.2.1 启用版权信息 70

4.2.2 设置版权信息内容 70

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

4.3 标签组 71

4.3.1 标签组的结构 72

4.3.2 构建标签 72

4.3.3 设置标签的样式 73

4.4 载入动画 73

4.4.1 显示载入动画 74

4.4.2 本地化载入动画 75

4.4.3 设置动画效果 76

第5章 图例 78

5.1 图例的构成 78

5.2 图例区 78

5.2.1 图例区基本设置 79

5.2.2 图例区的布局 82

5.2.2 图例区边框 85

5.3 标题 85

5.4 图例项目 87

5.4.1 图例项目的构成 87

5.4.2 图例项目的基本设置 87

5.4.3 图例符号 89

5.4.4 图例标签 91

5.4.5 图例项目的布局 92

5.4.6 图例项目的状态 95

5.5 图例的导航 96

5.6 图例扩展功能 98

5.6.1 在图例中显示节点数值 98

5.6.2 可拖动图例 99

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

第6章 坐标轴 102

6.1 坐标轴的基本构成 102

6.1.1 构建坐标轴 102

6.1.2 坐标轴组 105

6.1.3 动态添加／删除坐标轴 108

6.1.4 坐标轴类型 111

6.2 轴线 113

6.2.1 坐标轴线 114

6.2.2 标题 116

6.3 刻度 122

6.3.1 设定刻度值 122

6.3.2 主刻度线 125

6.3.3 次刻度线 128

6.3.4 刻度标签 130

6.3.5 时间日期型坐标轴刻度 133

6.3.6 标签空间的节省 138

6.3.7 间隔部分 143

6.4 网格线 146

6.4.1 主网格线 146

6.4.2 次网格线 148

6.5 数据标志线 149

6.5.1 标志线 149

6.5.2 标志线标签 151

6.6 数据条带 154

6.6.1 条带 154

6.6.2 条带标签 157

6.7 坐标轴扩展功能 159

6.7.1 图例坐标轴 159

6.7.2 拖放方式设置y轴区间 161

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

6.7.4 分组分类坐标轴 162

第7章 数据列和数据节点 165

7.1 数据列 165

7.1.1 数据列的配置 165

7.1.2 数据列的构成 166

7.1.3 基本配置 166

7.1.4 关联图例 170

7.1.5 关联坐标轴 174

7.1.6 设置阈值 176

7.1.7 数据列裁剪 177

7.1.8 数据列事件 178

7.2 关联鼠标 178

7.2.1 禁止鼠标跟随 179

7.2.2 禁止黏性跟随 180

7.2.3 设置悬浮状态 180

7.3 数据列区域 183

7.4 数据节点 185

7.4.1 定义节点 185

7.4.2 节点标记 189

7.4.3 节点标签 193

7.4.4 节点状态 200

7.4.5 节点事件 201

第8章 提示框 203

8.1 提示框构成 203

8.1.1 提示框简介 203

8.1.2 页眉 205

8.1.3 节点信息 206

8.1.4 页脚 207

8.1.5 十字准线 208

8.1.6 整体设置 210

8.2 提示框外观 211

8.2.1 外观 211

8.2.2 动画效果 213

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

第9章 下钻功能 217

9.1 实现下钻功能 217

9.1.1 基本下钻功能 217

9.1.2 分组下钻功能 218

9.2 下钻提醒 220

9.2.1 x轴标签提醒 220

9.2.2 节点标签提醒 221

9.3 下钻返回按钮 221

第10章 注解功能 223

10.1 构建基本的注解 223

10.1.1 Annotations插件概述 223

10.1.2 创建第一个注解 223

10.2 定位注解 224

10.2.1 根据刻度定位 224

10.2.2 关联定位 225

10.2.3 对齐方式 226

10.2.4 设置拖动模式 227

10.3 定制注解 228

10.3.1 设定注解文本 228

10.3.2 添加注解边框 229

10.4 注解工具栏 232

10.4.1 启用／禁用注解工具栏 232

10.4.2 定制注解工具栏 232

第11章 高级数据模块 234

11.1 高级数据来源 234

11.1.1 HTML表格 234

11.1.2 CSV格式数据 235

11.1.3 二维数组 237

11.2 指定数据范围 238

11.3 处理非规范数据 240

11.3.1 首行不包含数据列名 241

11.3.2 指定节点格式 242

11.3.3 行列交换 243

11.3.4 设定日期／时间格式 243

11.3.5 通用数据处理方式 246

第3篇 图表篇 250

第12章 饼图 250

12.1 构建饼图 250

12.1.1 数据节点 250

12.1.2 饼图的位置 252

12.1.3 饼图的大小 252

12.1.4 饼图边线 254

12.1.5 切片 254

12.1.6 数据标签 256

12.1.7 连接线 257

12.1.8 饼图的图例 260

12.2 特殊的饼图 261

12.2.1 环形图 261

12.2.2 扇形图 261

12.2.3 3D饼图 262

12.2.4 双饼图 263

12.2.5 空饼图 263

12.3 下钻饼图 265

12.3.1 添加节点关联 265

12.3.2 定义下钻数据列 266

12.3.3 下钻数据提示 267

12.4 下钻饼图的返回按钮 267

12.4.1 返回按钮文字 267

12.4.2 返回按钮对齐方式 268

12.4.3 返回按钮位置（drdrpo） 269

12.4.4 返回按钮主题（drdrth） 269

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

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

13.1.1 面积图数据节点 271

13.1.2 面积区域图数据节点 272

13.2 面积图区域颜色 273

13.2.1 统一设置 273

13.2.2 独立设置 274

13.3 面积图特定设置 275

13.3.1 重新设置基准 275

13.3.2 面积图跟踪 276

13.4 特殊的面积图 277

13.4.1 分色面积图 277

13.4.2 堆叠面积图 278

13.4.3 雷达面积图 279

13.5 多边形图 280

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

14.1 构建柱体 282

14.1.1 柱体颜色 282

14.1.2 柱体大小 284

14.1.3 柱体位置 286

14.2 特殊的柱体形式 287

14.2.1 柱体阈值 287

14.2.2 柱体分组 289

14.2.3 数据标签 290

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

14.3 特殊的柱形图 292

14.3.1 堆叠柱形图 292

14.3.2 雷达柱形图 294

14.3.3 下钻柱形图 295

14.3.4 3D柱形图 295

14.3.5 3D分组柱形图 296

14.3.6 包含负值的柱形图 297

14.3.7 圆角柱形图 298

14.3.8 每个柱体对应独立图例 299

14.4 柱形区域图 301

14.4.1 定义节点 301

14.4.2 数据标签 302

14.5 条形图 303

14.5.1 数据标签 303

14.5.2 分组条形图 304

14.5.3 堆叠条形图 304

14.5.4 3D条形图 305

14.6 瀑布图 306

14.6.1 构建瀑布图 306

14.6.2 柱体颜色 307

14.6.3 连接线 308

14.6.4 数据统计 308

14.6.5 分组瀑布图 309

14.6.6 3D瀑布图 310

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

15.1 曲线图 312

15.1.1 构建曲线图 312

15.1.2 堆叠曲线图 313

15.1.3 雷达曲线图 313

15.2 曲线面积图 314

15.2.1 基本曲线面积图 314

15.2.2 堆叠曲线面积图 315

15.2.3 雷达曲线面积图 316

15.3 曲线面积区域图 316

15.3.1 基本曲线面积区域图 316

15.3.2 雷达曲线面积区域图 317

第16章 散点图和气泡图 318

16.1 散点图 318

16.1.1 构建散点图 318

16.1.2 散点标记 319

16.1.3 3D散点图 320

16.2 气泡图 320

16.2.1 构建气泡图 321

16.2.2 气泡大小 321

16.2.3 设置气泡值域 323

16.2.4 设置气泡阈值 324

16.2.5 设置气泡样式 325

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

17.1 仪表图 326

17.1.1 构建仪表图 326

17.1.2 表盘 327

17.1.3 轴 328

17.1.4 仪表指针 329

17.1.5 标签 330

17.1.6 量程 331

17.1.7 超量程的处理 332

17.2 固态仪表图Solid Gauge 333

17.2.1 构建固态仪表图 333

17.2.2 设置表盘区域 334

17.2.3 过渡色模式 335

17.2.4 多色模式 336

第18章 树形图和热图 338

18.1 单层树形图 338

18.1.1 构建树形图 338

18.1.2 设置外观 339

18.1.3 布局方式 340

18.1.4 使用颜色轴 342

18.2 多层树形图 344

18.2.1 构建子节点 344

18.2.2 设定级别 345

18.2.3 子节点绘制角度 346

18.2.4 禁止子节点交互 347

18.3 下钻树形图 348

18.3.1 构建下钻树形图 348

18.3.2 动态级别 348

18.4 热图 351

18.4.1 创建热图 351

18.4.2 设置行列 352

第19章 金字塔图和漏斗图 353

19.1 普通金字塔图 353

19.1.1 构建金字塔图 353

19.1.2 金字塔的大小 354

19.1.3 金字塔的位置 355

19.1.4 切片 355

19.1.5 数据标签 356

19.1.6 连接线 357

19.2 下钻金字塔图 358

19.3 漏斗图 359

19.3.1 构建漏斗图 359

19.3.2 设置漏斗颈部 360

第20章 误差条图和盒图 361

20.1 误差条图 361

20.1.1 构建误差条图 361

20.1.2 定制截止线 363

20.1.3 定制茎线 363

20.2 特殊的误差条图 364

20.2.1 3D误差条图 364

20.2.2 横向误差条图 365

20.3 盒图 367

20.3.1 构建盒图 367

20.3.2 茎线和截止线 368

20.3.3 中位线 369

20.3.4 盒体 370

20.4 特殊的盒图 371

20.4.1 分组盒图 371

20.4.2 3D盒图 372

第21章 特殊类型图表 374

21.1 方波图 374

21.2 南丁格尔玫瑰图 376

21.3 甘特图 377

21.4 数轴图 378

21.4.1 普通数轴图 379

21.4.2 偏移数轴图 380

21.5 简略图 381

21.6 以柱形图显示最后节点 382

21.7 图案填充式图表 383

21.8 多彩图表 384

21.8.1 多彩折线图 384

21.8.2 多彩面积图 386

21.9 加权平均值图表 386

21.10 可拖动式图表 389

21.10.1 设置拖动类型 389

21.10.2 拖动提示 390

21.10.3 拖动范围 391

21.10.4 拖动事件 392