原创 Highcharts中的可拖動圖例

Highcharts中的可拖動圖例 圖例的初始位置當圖表中包括多個數據列的時候,瀏覽者往往需要花費大量的時間用於將圖例元素和數據列進行對應。這個時候,如果將圖例設置爲可拖動方式,就可以大大方便瀏覽者。用戶可以通過Highcharts的第

原创 Highcharts座標軸只顯示起始刻度和終止刻度

Highcharts座標軸只顯示起始刻度和終止刻度 在很多圖表中,瀏覽者只關心的起始值、終止值和數據趨勢。座標軸上的額外刻度反而會影響瀏覽者的注意力。這個時候,需要設置座標軸的刻度標籤,使得其只顯示起始刻度和終止刻度。設置刻度顯示,主要

原创 Highcharts圖例座標軸

Highcharts圖例座標軸 在複雜的圖表中,往往有多個數據列,而且每個數據列對應不同的座標軸。這個時候,瀏覽者往往很難分辨每個數據列使用了哪個座標軸。爲了解決這個問題,用戶可以使用第三方插件highcharts-legend-yax

原创 Highcharts構建空餅圖

Highcharts構建空餅圖 空餅圖就是不包含任何節點的餅圖。在Highcharts中,如果數據列不包含數據,會自動顯示空白。這樣瀏覽者無法判斷當

原创 Highcharts圖表的註解功能

Highcharts圖表的註解功能 在圖表中,往往需要對圖表整體或者部分元素進行相應註解,幫助瀏覽者閱讀圖表。雖然標籤組labels可以實現類似的功能,但是其功能相對簡單。要實現複雜的註解功能,用戶可以藉助第三方插件Annotations

原创 Highcharts構建加權平均值圖表

Highcharts構建加權平均值圖表 加權平均值圖表是將圖表中多個數據列值,根據加權算法計算獲取平均值,並添加生成一個加權折線。在這裏,我們直接使用第三方插件Dynamic Weighted Average實現該功能。由於該圖表需要額

原创 Highcharts構建分組分類座標軸

Highcharts構建分組分類座標軸 分組分類座標軸是將座標軸的類別標籤進行進一步分組,從而形成雙層、多層結構。這樣更利於數據分組展現。實現分組分類座標軸需要藉助第三方插件Grouped-Categories實現。引入該插件後,用

原创 Highcharts延x軸縮小

Highcharts延x軸縮小 嚴格意義上,Highcharts只提供了放大功能,並沒有提供縮小功能。如果用戶想縮小座標軸,只能通過重置按鈕回到原來的大小,再重新縮放。實際實現該功能可以通過第三方插件Zoom Out Selectio

原创 Highcharts根據圖例高度擴展圖表高度

Highcharts根據圖例高度擴展圖表高度 當圖例區不處於浮動狀態下,圖例區會佔用圖表空間。如果圖表中數據列較多,會大量佔用圖表空間,從而壓縮繪圖

原创 Highcharts可拖動式圖表

Highcharts可拖動式圖表 默認情況下,Highcharts根據給定的數據列生成圖表。瀏覽者是無法修改圖表的。如果瀏覽者需要手動調整數據節點,就需要藉助第三方插件Draggable Points。使用該插件後,瀏覽者可以直接拖動圖表

原创 Highcharts 3D圖表標誌線標籤偏移問題

Highcharts 3D圖表標誌線標籤偏移問題 在3D模式圖表中,由於景深的影響,會造成標籤顯示錯位。這時,需要調整水平偏移位置,加大配置項x的值,使其避開景深部分。 景深錯位和調整後的效果 點贊

原创 使用Highcharts生成簡略圖

使用Highcharts生成簡略圖當數據列包含的節點非常多,會造成瀏覽器花費大量的時間渲染圖表。這個時候,用戶可以採用下采樣的方式,從原有數據列抽取

原创 Highcharts圖例中顯示節點數值

Highcharts圖例中顯示節點數值 由於圖例的位置固定,並且較爲醒目。所以,在圖例元素後面顯示對應數據列節點數值也是一種很好的數據展現方式。實現該功能,用戶可以藉助Highcharts的第三方插件VALUE-IN-LEGEND實

原创 Highcharts構建多彩圖表

Highcharts構建多彩圖表 在數據列中,可以通過配置項zones定義數據列區域實現一個數據列上包含多種顏色。但是這種方法不能直接在data中指

原创 Highcharts 拖放方式設置y軸區間

Highcharts 拖放方式設置y軸區間 默認情況下,Highcharts通過用戶前期設置或者數據列計算y軸區間。很多時候,計算的並不能滿足瀏覽者需要。這時,用戶可以藉助第三方插件Scalable Y-Axis,允許瀏覽者以拖動y軸刻