[highcharts] 01_dataGrouping 和xDateFormat失效

前言、基础、约定

一般我们会用这种方式来使用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...