前言、基础、约定
    image.png
    一般我们会用这种方式来使用highcharts，所需的配置都在stockOptions里
    （注：这里命名不一定要用stockOptions，它只是一个对象）

    stockOptions是一个对象如下图所示
    image.png

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

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

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

    正文

    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; // 开启数据聚合
    image.png

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

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

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

    下面代码是tooltip的设置样例
    image.png

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

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

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

    为了能够完全按自己想要的日期样式来输出，有两种方案。
    1、关闭数据聚合 stockOptions.plotOptions.dataGrouping = false;
    2、修改配置项stockOptions.plotOptions.series.dataGrouping.dateTimeLabelFormats = { //… }
    image.png
    实例代码如上图所示，将所有时间区间聚合后的显示样式，都设置为“%Y-%m-%d”，这样在highcharts数据聚合后，不论以什么时间跨度聚合，显示日期都是形如“2002-12-31”的格式。