共计 1597 个字符，预计需要花费 4 分钟才能阅读完成。
前言、根底、约定
个别咱们会用这种形式来应用 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…