Highcharts 学习笔记1-折线图（时间解析不对的坑点）

最新推荐文章于 2023-08-04 12:27:00 发布

Hiram Fan

最新推荐文章于 2023-08-04 12:27:00 发布

阅读量2k

点赞数 4

分类专栏：笔记文章标签： json html js javascript

本文链接：https://blog.csdn.net/qq_44656336/article/details/110320682

版权

笔记专栏收录该内容

11 篇文章 0 订阅

订阅专栏

好久没有更新博客了，今日突然热血沸腾，更新一下，昨晚日夜苦战学习的成果。

同时分享下，本次的本人是如何学习这一类图表库的经验。

一、如何使用 Highcharts 制作简易的折线图

1. 官方案例

要使用 Higcharts 最快学会的方法，就是拿着官网给我们的例子，加以分析和修改。

Highcharts 官网地址：https://www.highcharts.com.cn/demo/highcharts
在这里插入图片描述
来到首页，我们先找到我们需要的图表类型。这里我使用的是折线图。

可以看到，左边可以选择我们需要的图表类型，这里我演示的是可缩放时间轴的为例子

官方给我们提供的例子中，也给了我们 JS 和 HTML 的代码。

我们先看下 HTML，官方是如何给我们示例的。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
    <head>
        <meta charset="utf-8"><link rel="icon" href="https://jscdn.com.cn/highcharts/images/favicon.ico">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <style>
            /* css 代码  */
        </style>
        <script src="https://code.highcharts.com.cn/jquery/jquery-1.8.3.min.js"></script>
        <script src="https://code.highcharts.com.cn/highcharts/highcharts.js"></script>
        <script src="https://code.highcharts.com.cn/highcharts/modules/exporting.js"></script>
        <script src="https://code.highcharts.com.cn/highcharts/modules/oldie.js"></script>
        <script src="https://code.highcharts.com.cn/highcharts-plugins/highcharts-zh_CN.js"></script>
    </head>
    <body>
        <div id="container" style="min-width:400px;height:400px"></div>
        <script>
            // JS 代码 
        </script>
    </body>
</html>

可以看到，官方给我我们的使用范例中，实际上只有两个部分，一部分就是，引入了一个标签<div id="containre" style="min-width:400px;height:400px"></div>可以知道这就是显示图表的标签，其解析，是由这个图表库为我们实现的。

看到这里，或许还是很懵，不知道如何使用。那我们在看下 JS 代码

var chart = null;
$.getJSON('https://data.jianshukeji.com/jsonp?filename=json/usdeur.json&callback=?', function (data) {
	chart = Highcharts.chart('container', {
		chart: {
			zoomType: 'x'
		},
		title: {
			text: '美元兑欧元汇率走势图'
		},
		subtitle: {
			text: document.ontouchstart === undefined ?
			'鼠标拖动可以进行缩放' : '手势操作进行缩放'
		},
		xAxis: {
			type: 'datetime',
			dateTimeLabelFormats: {
				millisecond: '%H:%M:%S.%L',
				second: '%H:%M:%S',
				minute: '%H:%M',
				hour: '%H:%M',
				day: '%m-%d',
				week: '%m-%d',
				month: '%Y-%m',
				year: '%Y'
			}
		},
		tooltip: {
			dateTimeLabelFormats: {
				millisecond: '%H:%M:%S.%L',
				second: '%H:%M:%S',
				minute: '%H:%M',
				hour: '%H:%M',
				day: '%Y-%m-%d',
				week: '%m-%d',
				month: '%Y-%m',
				year: '%Y'
			}
		},
		yAxis: {
			title: {
				text: '汇率'
			}
		},
		legend: {
			enabled: false
		},
		plotOptions: {
			area: {
				fillColor: {
					linearGradient: {
						x1: 0,
						y1: 0,
						x2: 0,
						y2: 1
					},
					stops: [
						[0, new Highcharts.getOptions().colors[0]],
						[1, new Highcharts.Color(Highcharts.getOptions().colors[0]).setOpacity(0).get('rgba')]
					]
				},
				marker: {
					radius: 2
				},
				lineWidth: 1,
				states: {
					hover: {
						lineWidth: 1
					}
				},
				threshold: null
			}
		},
		series: [{
			type: 'area',
			name: '美元兑欧元',
			data: data
		}]
	});
});

2. 官方帮助文档

看到这里，又更懵了，出现了一堆的属性一样的东西。这个时候，我们学习别人的东西的时候，就需要去看看，人家(官网)告诉我们是如何使用的。

Highcharts 官网还是很棒的一个网站，首先他是一个中文网站、在网站中，为我们提供了大量的模板，同时，还为广大的用户提供了，帮助手册，为我们提供了中文版的 API 文档。
在这里插入图片描述
打开使用教程，我们看看，官方是如何教我们学的。

左边可以看到，基础教程，我们先从基础教程来看吧。（推荐，大家可以把快速上手看下）

我们要使用图表，就需要对图表的一些组成，需要有一定的了解。
在这里插入图片描述
这里只截图了官方提供的一张图表的组成。更详细的内容，需要大家直接去官网学习查看。

到了这里，我们就需要开始解析下我们刚刚在 JSON 代码中看到的一堆的不懂的内容。

看到这里，博主建议你们，把刚刚官网给的例子，可以试着在本地上运行起来，看看效果，然后我们来一个个的看懂 JSON 文件中的每一个属性。

3. $.getJson() 方法

首先就是在 JSON 代码中，我们一开看到了一个 jQuery 的一个方法 $.getJSON('xxxxx', function(data){...}) 这是使用 ajax 来发送一个请求，获取 json 数据，实际发送的一个 Get 方式的请求。

实际有三个参数：url、data、success()
本别表示：请求地址、请求参数、回调函数。
其中，请求地址必须有，后两个参数，可选。

我们知道了一开始这个的作用后，我们开始继续往下看，回到函数里的内容。

4. Highcharts.chart() 方法

我们可以看到，官方调用了一个方法 Highcharts.chart('container', {...}) ，如果你刚刚有看 快速上手 那么你应该会懂这个方法是干嘛用的。

在快速上手 的1分钟上手 Highcharts 中见到的介绍了下这个方法的作用：
在这里插入图片描述
我们可以看到，实际上这个方法就是一个创建图表的一个函数，其中的两个参数分别表示：容器ID、图表的配置。

这样就和我们刚刚的对应上了，代码中的第一个参数就是：container 就是我们刚刚 html 文件中的 div 标签的 id。

5. 图表类型、标题、副标题

我们离懂的道理又进了一步，我们继续看配置的部分。

chart: {
	zoomType: 'x'
},
title: {
	text: '美元兑欧元汇率走势图'
},
subtitle: {
	text: document.ontouchstart === undefined ?
	'鼠标拖动可以进行缩放' : '手势操作进行缩放'
},

如果你刚刚有好奇的打开，API 文档的话，你可能就知道，应该如何去哪里看，弄懂这个配置了。

打开 API 文档：
在这里插入图片描述
左边就能发现，一堆和配置相关的字段属性。

通过阅读 API 文档后，我们知道：

/* 图表配置 */
chart: {
	/* 缩放方式 */
	zoomType: 'x'
},
/* 标题 */
title: {
	/* 标题显示的文字 */
	text: '美元兑欧元汇率走势图'
},
/* 副标题 */
subtitle: {
	/* 副标题显示的文字 */
	/* 是一个判断，JS中的语法，判断的是当前是手机用户，还是web用户（详细的内容，请看查阅JS的相关内容） */
	text: document.ontouchstart === undefined ?
	'鼠标拖动可以进行缩放' : '手势操作进行缩放'
},

这三个配置，实现的效果，就是下面两幅图
在这里插入图片描述

6. x轴坐标轴、时间解析

接下来，我们可以看到一个 xAxis 属性，这个属性是配置 x 轴坐标的属性。

/* x轴 */
xAxis: {
	/* 坐标轴的类型，datetime 时间类型 */
	type: 'datetime',
	/* 时间标签格式化字符 */
	dateTimeLabelFormats: {
		millisecond: '%H:%M:%S.%L',
		second: '%H:%M:%S',
		minute: '%H:%M',
		hour: '%H:%M',
		day: '%m-%d',
		week: '%m-%d',
		month: '%Y-%m',
		year: '%Y'
	}
},

这里时间格式化，需要解释下，你也可以去搜索其他博客，他们写的会更详细一些。在 Highcharts 中，他的格式化格式是一个 PHP 的时间格式：
在这里插入图片描述
实际上这个配置对应的是：Highcharts.dateFormat() 这个函数，该函数的用法，参考官方文档：https://bbs.hcharts.cn/article-124-1.html

所以 dateTimeLabelFormats 该标签，主要是指定，在什么样的类型中，显示的时间格式是什么样的。

7. 数据提示框、y轴坐标、图例

接下来继续看剩下的代码

/* 数据提示框 */
tooltip: {
	/* 时间标签格式化字符 */
	dateTimeLabelFormats: {
		millisecond: '%H:%M:%S.%L',
		second: '%H:%M:%S',
		minute: '%H:%M',
		hour: '%H:%M',
		day: '%Y-%m-%d',
		week: '%m-%d',
		month: '%Y-%m',
		year: '%Y'
	}
},
/* y轴 */
yAxis: {
	/* 标题 */
	title: {
		/* 标题内容 */
		text: '汇率'
	}
},
/* 图例 */
legend: {
	/* 图例开关（false表示关闭） */
	enabled: false
},

上述代码，实现的效果：
在这里插入图片描述
图例运行的效果：

8. 数据列配置

接下来的代码是数据列配置：
什么是数据列，可以看下原来的那张图，数据列就是中间显示的数据。
在这里插入图片描述
这里我们所解读的类型，就是面积图类型。

注意：如果你去看 API 文档，点开 fillColor 里的内容，是没有属性的配置的，注意这里写的实际上是 css 的内容。比如 linearGradinent 实际上是 linear-gradinent，而这个字段是 css 里的渐变色。

/* 数据列配置 */
plotOptions: {
	/* 面积图 */
	area: {
		/* 填充的颜色 */
		fillColor: {
			/* 渐变色 */
			linearGradient: {
				x1: 0,
				y1: 0,
				x2: 0,
				y2: 1
			},
			/* 渐变从0开始到1结束 */
			stops: [
				[0, new Highcharts.getOptions().colors[0]],
				[1, new Highcharts.Color(Highcharts.getOptions().colors[0]).setOpacity(0).get('rgba')]
			]
		},
		/* 标记点（鼠标停留在图上，出现的那个点） */
		marker: {
			/* 半径 */
			radius: 2
		},
		/* 线条宽度 */
		lineWidth: 1,
		/* 状态 */
		states: {
			/* 悬停 */
			hover: {
				lineWidth: 1
			}
		},
		/* 阀值，临界值 */
		threshold: null
	}
},

在这里插入图片描述

9. 通用数据列、JSON 数据解析

接下来，最为核心的代码，显示数据的部分，也是最后解读的部分：

/* 通用数据列 */
series: [{
	/* 数据列类型 */
	type: 'area',
	/* 在图例和工具提示中显示的名字 */
	name: '美元兑欧元',
	/* 数据 */
	data: data
}]

这里，可能又会出现疑问了，那就是这里的数据格式，可以看到这里直接将我们获取到的 data 数据，赋值进去了，我们可以看到

我们一开始，发送的是一个 getJSON 请求，获取的是一个 json 的数据格式，那么我们接下来，就请求下，查看下，官方发送的是什么样的数据格式的。

浏览器输入地址，请求下，查看下获取的数据
地址：https://data.jianshukeji.com/jsonp?filename=json/usdeur.json&callback=?
在这里插入图片描述
看到这里，可以大胆的猜测，这个 json 数据是一个二维数组，每一个数组里有两个数据，一个是时间数值，一个是数据。
而这个时间数值是 long （毫秒）。

时间毫秒数，有坑点，请看篇末尾！！！

那么到这里，我们可以试着去看下官方对于数据的解析是怎么说的。

在官方的文档中的数据处理，对于处理文本或者文本数据文件中，有说到 JSON 格式。
在这里插入图片描述

在这里插入图片描述
这里，是简答的介绍了一下。看了还是不懂，是怎么个回事，我们来到官方提供的 API 文档。查看下 data 属性（不懂是为什么，这里没有翻译）
简单的说，可以分为三类：

只有一维数组，将直接当成是 y 轴的值，而 x 轴的值，他会自己处理，或者根据其他的配置处理。
如果是两维数据的数组，且每个一维数组中，有两个值，那么将直接当成是一个个的坐标点，也就是一个一维数组就当成是（x, y）坐标点。当然这里还说了，如果第一个数据是字符串，则应用他做点的名称，并推断出 x 的值。
如果是一个对象数组，那么就需要对应属性字段了。

这是我本人粗劣的解读，大家可以在仔细的查看查看。

二、时间解析问题（坑点）

到了这里，我又想起了一个昨天晚上，我之所以学习深夜的原因，那就是这个 Highcharts 的区域时间解析问题！！！

前期学习都还挺顺利，我自己写好了一个图表后，发现 x 轴的时间解析的老是有问题，明明是 23 点的时间，他给我显示是下午 15 点的时间。

这个问题，让我百思不得其解，各种百度，最后，终于发现了问题。

Highcharts 默认开启了 世界标准时间 就是叫 UTC 的玩意。

是咱们中国不配吗！！！搞什么世界标准时间啊，于是乎，终于解决了这个问题。

解决方法：
在 JS 文件中，使用下面的代码，关闭使用 UTC 解析时间

Highcharts.setOptions({global: {useUTC: false}});

OK，到了这里，就是我本人，昨天晚上，深夜一人默默学习的成果，在这里分享给大家。

最后给祝大家：好好学习，天天向上，早日秃头，聪明绝顶啊！！！
在这里插入图片描述

Hiram Fan

关注

4
点赞
踩
4

收藏

觉得还不错? 一键收藏
打赏
1
评论
Highcharts 学习笔记1-折线图（时间解析不对的坑点）

好久没有更新博客了，今日突然热血沸腾，更新一下，昨晚日夜苦战学习的成果。同时分享下，本次的本人是如何学习这一类图表库的经验。目录一、如何使用 Highcharts 制作简易的折线图1. 官方案例2. 官方帮助文档3. $.getJson() 方法4. Highcharts.chart() 方法5. 图表类型、标题、副标题6. x轴坐标轴、时间解析7. 数据提示框、y轴坐标、图例8. 数据列配置9. 通用数据列、JSON 数据解析二、时间解析问题（坑点）一、如何使用 Highcharts 制作简.
复制链接

扫一扫