前言、基础、约定

一般我们会用这种方式来使用highcharts,所需的配置都在stockOptions里
(注:这里命名不一定要用stockOptions,它只是一个对象)

stockOptions是一个对象如下图所示

下文我们用对象语法来介绍配置,图中箭头指向的”type”记作 stockOptions.chart.type
(也就是 stockOptions.chart.type = “column”; )

“...”省略了很多配置项,一般来说配置项都有默认值,不写明配置,highchats绘图时就会使用默认配置。

后文中写出的配置项均用对象语法,放心大胆的创建对象并赋值。
如: stockOptions.xAxis.showFirstLabel = false;
就是创建下图中红框所示的配置项

正文

1、dataGrouping 数据聚合和xDateFormat失效
stockOptions.plotOptions.dataGrouping = true; // 默认配置为true,即默认开启数据聚合。

不论stockOptions.chart.type 指定为 “line”、“area”、“column” 还是其他图像类型,只要数据点过于密集(“密集”表现在x轴方向,单位长度的数据量大。默认情况下“密集”的限度由highcharts进行衡量,也就是说默认情况下,我们不能控制highcharts何时对数据进行聚合)

先拿stockOptions.chart.type = “column” 举个例子
↓ stockOptions.plotOptions.dataGrouping = true; // 开启数据聚合

↓ stockOptions.plotOptions.dataGrouping = false; // 关闭数据聚合

上面两个图的底层数据是同一份数据,在数据聚合开启的时候,一旦触发聚合,多个柱子会合为一个柱子,柱子的高度也发生变化(柱子的高度是取平均还是抽样,未知)

tooltip
我们处理一张图中的多条line,又或者多个柱状图堆叠,这两种情况的浮窗提示tooltip时,基本都会使用 stockOptions.tooltip.pointFormatter = function() { // ... } 来进行浮窗内容的自定义。

下面代码是tooltip的设置样例

xDateFormat
这里我们要说的重点是stockOptions.tooltip.xDateFormat 这个key接收一个字符串作为日期格式化的格式。
stockOptions.tooltip.xDateFormat = “%Y-%m-%d” 对应格式化结果样例 “2002-12-31”

但是我们会发现这样的问题,有的时候格式化失效,出现不符合预期的日期格式,如下图。

出现这个问题的原因是xDateFormat 仅针对单个点生效。
在默认情况下,数据聚合开启,(stockOptions.plotOptions.dataGrouping = true); 这个情况下如果highcharts把数据聚合,那么xDateFormat 将失效。聚合后的时间格式将按照默认的聚合属性dateTimeLabelFormats来展示。

为了能够完全按自己想要的日期样式来输出,有两种方案。
1、关闭数据聚合 stockOptions.plotOptions.dataGrouping = false;
2、修改配置项stockOptions.plotOptions.series.dataGrouping.dateTimeLabelFormats = { //... }

实例代码如上图所示,将所有时间区间聚合后的显示样式,都设置为“%Y-%m-%d”,这样在highcharts数据聚合后,不论以什么时间跨度聚合,显示日期都是形如“2002-12-31”的格式。

同步更新到个人语雀
https://www.yuque.com/diracke...

03-05 22:53