[highcharts] 01_dataGrouping 和xDateFormat失效詳情 - 前端,可視化,highcharts,tooltip DiracKeeko 博客

前言、基礎、約定

一般我們會用這種方式來使用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”的格式。