网页图表Highcharts实践教程基础篇大学霸内部资料

声明：
买教程送邮件答疑
教程版权归大学霸所有
教程为彩色
由于教程有水印，影响二次销售，不接受退款
为防盗版，教程每页都会添加水印，水印默认为购买者的账号名+电话
购买时，请QQ联系，确定收货地址、付款方式等

目  录

第1章  认识Highcharts 1

1.1  Highcharts概述… 1

1.1.1  下载Highcharts 1

1.2.2  Highcharts的图表类型… 3

1.2  第一个实例… 9

1.3  图表构成… 10

1.3.1  界面构成… 10

1.3.2  代码构成… 11

1.4  快速认识图表配置项… 11

1.4.1  基本结构… 11

1.4.2  图表区配置项chart 13

1.4.3  版权信息配置项credits 13

1.4.4  图例配置项legend. 13

1.4.5  标题title和副标题subtitle. 13

1.4.6  数据列配置项plotOptions和series 14

1.4.7  提示框tooltip. 15

1.4.8  数轴xAxis/yAxis 15

1.5  商业授权和定制开发… 15

1.5.1  商业授权… 15

1.5.2  定制开发… 16

第2章  准备数据… 18

2.1  数据的作用… 18

2.2  Highcharts数据表示… 18

2.2.1  数据列… 18

2.2.2  数据节点… 19

2.2.3  简化为二维数组… 22

2.2.4  简化为一维数组… 23

2.3  图表中的数据使用… 24

2.3.1  数值类型数据… 24

2.3.2  时间日期数据… 27

2.3.3  字符串数据… 30

第3章  图表区… 34

3.1  图表区的构成… 34

3.2  外层图表区… 34

3.2.1  外层图表区的基本设置… 34

3.2.2  外层图表区的边框… 36

3.2.3  外层图表区的范围… 37

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

3.2.5  外层图表区阴影… 40

3.2.6  图表区样式… 41

3.3  绘图区… 42

3.3.1  绘图区的边框… 42

3.3.2  绘图区的背景… 43

3.4  图表缩放… 44

3.4.1  图表缩放类型… 45

3.4.2  填充选择区… 46

3.4.3  重置按钮… 46

3.4.4  缩放后的刻度计算… 50

3.4.5  缩放扩展：延x轴缩小… 51

3.5  图表平移… 52

3.5.1  启用图表平移… 52

3.5.2  设置图表平移方式… 52

3.5.3  设置延y轴平移… 53

第4章  辅助元素… 54

4.1  标题/副标题… 54

4.1.1  标题和副标题的构成… 54

4.1.2  标题的样式… 55

4.1.3  标题的布局方式… 56

4.2  版权信息… 58

4.2.1  启用版权信息… 59

4.2.2  设置版权信息内容… 59

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

4.3  标签组… 60

4.3.1  标签组的结构… 60

4.3.2  构建标签… 61

4.3.3  设置标签的样式… 61

4.4  载入动画… 62

4.4.1  显示载入动画… 62

4.4.2  本地化载入动画… 63

4.4.3  设置动画效果… 64

第5章  图例… 66

5.1  图例的构成… 66

5.2  图例区… 66

5.2.1  图例区基本设置… 67

5.2.2  图例区的布局… 69

5.2.2  图例区边框… 72

5.3  标题… 73

5.4  图例项目… 74

5.4.1  图例项目的构成… 74

5.4.2  图例项目的基本设置… 74

5.4.3  图例符号… 76

5.4.4  图例标签… 77

5.4.5  图例项目的布局… 79

5.4.6  图例项目的状态… 81

5.5  图例的导航… 82

5.6  图例扩展功能… 83

5.6.1  在图例中显示节点数值… 83

5.6.2  可拖动图例… 84

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

第6章  坐标轴… 87

6.1  坐标轴的基本构成… 87

6.1.1  构建坐标轴… 87

6.1.2  坐标轴组… 89

6.1.3  动态添加/删除坐标轴… 92

6.1.4  坐标轴类型… 95

6.1.5  隐藏坐标轴… 97

6.2  轴线… 98

6.2.1  坐标轴线… 98

6.2.2  标题… 101

6.3  刻度… 105

6.3.1  设定刻度值… 105

6.3.2  主刻度线… 108

6.3.3  次刻度线… 111

6.3.4  刻度标签… 112

6.3.5  时间日期型坐标轴刻度… 115

6.3.6  标签空间的节省… 120

6.3.7  间隔部分… 124

6.4  网格线… 127

6.4.1  主网格线… 127

6.4.2  次网格线… 128

6.5  数据标志线… 129

6.5.1  标志线… 129

6.5.2  标志线标签… 131

6.6  数据条带… 133

6.6.1  条带… 133

6.6.2  条带标签… 136

6.7  坐标轴扩展功能… 138

6.7.1  图例坐标轴… 138

6.7.2  拖放方式设置y轴区间… 139

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

6.7.4  分组分类坐标轴… 141

第7章  数据列和数据节点… 143

7.1  数据列… 143

7.1.1  数据列的配置… 143

7.1.2  数据列的构成… 144

7.1.3  基本配置… 144

7.1.4  关联图例… 148

7.1.5  关联坐标轴… 153

7.1.6  设置阈值… 155

7.1.7  数据列裁剪… 156

7.1.8  数据列事件… 157

7.2  关联鼠标… 157

7.2.1  禁止鼠标跟随… 158

7.2.2  禁止黏性跟随… 158

7.2.3  设置悬浮状态… 159

7.3  数据列区域… 162

7.4  数据节点… 163

7.4.1  定义节点… 163

7.4.2  节点标记… 167

7.4.3  节点标签… 171

7.4.4  节点状态… 177

7.4.5  节点事件… 178

第8章  提示框… 179

8.1  提示框构成… 179

8.1.1  提示框简介… 179

8.1.2  页眉… 181

8.1.3  节点信息… 182

8.1.4  页脚… 183

8.1.5  十字准线… 184

8.1.5  整体设置… 186

8.2  提示框外观… 187

8.2.1  外观… 187

8.2.2  动画效果… 189

8.3  提示框扩展功能… 190

8.3.1  延迟显示提示框… 190

第9章  下钻功能… 192

9.1  实现下钻功能… 192

9.1.1  基本下钻功能… 192

9.1.2  分组下钻功能… 193

9.2  下钻提醒… 195

9.2.1  x轴标签提醒… 195

9.2.2  节点标签提醒… 196

9.3  下钻返回按钮… 196

第10章  注解功能… 198

10.1  构建基本的注解… 198

10.1.1  Annotations插件概述… 198

10.1.2  创建第一个注解… 198

10.2  定位注解… 199

10.2.1  根据刻度定位… 199

10.2.2  关联定位… 200

10.2.3  对齐方式… 201

10.2.4  设置拖动模式… 201

10.3  定制注解… 202

10.3.1  设定注解文本… 202

10.3.2  添加注解边框… 203

10.4  注解工具栏… 206

10.4.1  启用/禁用注解工具栏… 206

10.4.2  定制注解工具栏… 207

第11章  高级数据模块… 209

11.1  高级数据来源… 209

11.1.1  HTML表格… 209

11.1.2  CSV格式数据… 210

11.1.3  二维数组… 211

11.2  指定数据范围… 213

11.3  处理非规范数据… 215

11.3.1  首行不包含数据列名… 215

11.3.2  指定节点格式… 216

11.3.3  行列交换… 217

11.3.4  设定日期/时间格式… 218

11.3.5  通用数据处理方式… 220

第12章  高级功能… 221

12.1  动画图表功能… 221

12.1.1  启用动画功能… 221

12.1.2  时间轴… 223

12.1.3  控制动画… 224

12.2  使用主题… 225

12.2.1  使用默认主题… 225

12.2.2  自定义主题… 226

附录A  颜色… 228

A.1  实色… 228

A.2  透明色… 228

A.3  渐变色… 229

A.3.1  线性渐变色… 229

A.3.2  径向渐变色… 230

A.4  全局颜色… 231

附录B  Highcharts错误类型… 232

B.1  查询错误方式… 232

B.2  常见错误… 232

B.2.1  Highcharts Error #10. 232

B.2.2  Highcharts Error #11. 232

B.2.3  Highcharts Error #12. 233

B.2.4  Highcharts Error #13. 233

B.2.5  Highcharts Error #14. 233

B.2.6  Highcharts Error #15. 233

B.2.7  Highcharts Error #16. 233

B.2.8  Highcharts Error #17. 233

B.2.9  Highcharts Error #18. 233