實現效果如圖的timeseries chart,一些概念在圖上做了標注。
有幾個特點:
1.多個Y軸,兩個、三個數量不限,均勻地垂直排列,每個軸只有一條數據線2.共享X軸,X軸是時間軸,同時crosshair可以在多個軸上同步移動3.支持plot band,就是半透明的帶狀圖形,可以從第三個維度表示一段時間的某種狀態,在開始結束的地方有flag。highcharts的配置是一個JS對象,屬性非常多,但是層級概念很清晰,文檔比較容易閱讀查找,相信任何人用一段時間就可以很快上手。大體上講,配置包括整個chart的,比如height、width、margin等,然后是坐標軸的,比如title、range,進一步是具體圖形的配置。圖形series的配置有3級:plotOptions.series配置所有series的通用屬性;每個類型的series在具體類型的配置屬性中,比如plotOptions.area;具體某一個series的配置可以放到series數組中。具體的配置能夠覆蓋掉通用的配置。其實上面的前兩個特性在hightcharts的一個叫synchronized-charts的demo中已經有支持,但是方案跟本文完全不同,各有千秋,本文的要簡單些。廢話少說,上代碼:{ xAxis: { type: 'datetime', crosshair: { dashStyle: 'shortdot' } }, plotOptions: { areaspline: { // 帶填充的樣條曲線 ... }, area: { // 只用于替代highcharts內置的plot bands,因為不清楚如何配置多個Y軸獨立的band marker: { enabled: false // 不需要marker }, lineWidth: 0, // 只有填充,沒有line fillColor: 'rgba(160, 200, 220, 0.5)', enableMouseTracking: false // 因為area只用于plot band,所以不響應鼠標事件 }, flags: { shape: 'circlepin', tooltip: { followPointer: true, //flag的tooltip跟隨鼠標,不設置的話在多個軸的情況下會都跑到最上面 } } }, tooltip: { useHTML: true, // 所有tooltip都使用html格式 }}上面的配置是一些靜態的通用配置,去掉了一些跟主題關系不大的,比如areaspline的具體配置,主要看plot band(area)和flag的配置,他們定義了plot band和flag的樣式和行為。這些靜態配置在圖像的第一次初始化和以后動態更新數據時都不需要改變。相對的,動態的配置就是根據傳入的參數動態變化的,主要是yAxis和series的配置,以及整個圖像的高度。由于highcharts的配置比較復雜,為了盡可能簡化調用者的使用難度,在動態添加軸時對配置進行了一些抽象。比如圖像的高度會隨著軸數的增加而變化,調用者只需要配置每個軸的高度就可以,整個chart的高度會自動調整,后面如果需要動態調整圖像高度也比較方便。這樣,想要畫出最開始的那個圖像,不包括plot band和flag,用戶只需要輸入如下的數據:{ axisHeight: 200, yAxis: [ { id: "1", name: "Link A" }, { id: "2", name: "Link B" } ], data: { "1": [ [1482463578000, 113], [1482463878000, 22], ... ], "2": [ [1482463578000, 34], [1482463878000, 245], ... ] }}只有單純Y軸和數據,那么代碼需要隱含增加哪些配置呢?其實主要是坐標軸的偏移配置。默認的,如果沒有偏移配置,所有Y軸是疊加在一起的。
這里使用了yAxis.top屬性,官方文檔的解釋是:The top position of the Y axis. If it's a number, it is interPReted as pixel position relative to the chart. 也就是在動態添加Y軸時,屬性top的值要這樣: top: (axisHeight + 30) * i + 20axisHeight是用戶輸入的配置,i是循環變量,多個軸時從0開始,30是兩個圖形之間的寬度,單位都是pixel。series的配置沒有特殊之處,需要指定線型和綁定的Y軸。好了,后面就是如何添加plot band和flag了。二者都是基于已有Y軸的,所以不需要再修改Y軸配置,只需要添加series就可以。除了上面代碼注釋中提到的,系統自帶plot band無法多個軸獨立配置之外,如果使用系統自帶plot band,flag也很難挪到圖像上方,默認只有兩種配置:附于X軸或者series線條。而使用series來模擬plot band,這個問題就不存在了,因為這個area的series是等高的,大小等于areaspline的extreme的dataMax再乘以一個系數,依附于這個series的flag已經在圖像最上方了。area series的配置如下:{ type: 'area', id: 'xxx' yAxis: 'xxx', zIndex: -1, data: [[from, dataMax], [to, dataMax]]}注意也需要綁定Y軸。flag series的配置如下:{ type: 'flags', title: 's', onSeries: 'xxx' yAxis: axis_id, tooltip: {...}, data: [{ x: start, },{ x: stop, }]}要綁定area的series和Y軸。暫未實現的特性:1.flag的樣式只能使用highcharts自帶的,這里是’circlepin’2.marker上的toolltip只顯示當前軸的數據,不能在一個tooltip中同時顯示同一時間點多個軸的數據。 盡管tooltip有share屬性,但是只對同一個坐標軸的多個series有效。
新聞熱點
疑難解答