翻譯|使用教程|編輯:楊鵬連|2021-03-01 16:42:10.900|閱讀 293 次
概述:本教程將說明如何利用智能的Highchart選項創(chuàng)建交互式動畫圖表。
# 界面/圖表報表/文檔/IDE等千款熱門軟控件火熱銷售中 >>
Highcharts是一款純JavaScript編寫的圖表庫,為你的Web網(wǎng)站、Web應(yīng)用程序提供直觀、交互式圖表。當(dāng)前支持折線、曲線、區(qū)域、區(qū)域曲線圖、柱形圖、條形圖、餅圖、散點圖、角度測量圖、區(qū)域排列圖、區(qū)域曲線排列圖、柱形排列圖、極坐標(biāo)圖等幾十種圖表類型。
本教程將說明如何利用智能的Highchart選項創(chuàng)建交互式動畫圖表。
動畫圖表可以提供強大有效的方法來吸引人們注意數(shù)據(jù)的某些方面。作為一次讓過多的數(shù)據(jù)使觀眾不知所措的替代方法,動畫使觀眾能夠以中等速度深入了解數(shù)據(jù)。
下圖顯示了1980年至2020年北極海冰的范圍:
上面的圖表顯示了6條不同的線;(四)灰線代表1980、1990、2000和2010年的數(shù)據(jù);藍色線代表2020年的最新測量值,紅色線代表2012年的最低記錄。
如果沒有動畫,圖表可能會使觀眾不知所措,從而需要更多時間和認(rèn)知處理來理解數(shù)據(jù)正在嘗試的故事。當(dāng)下。通過包含動畫,觀眾可以在短時間內(nèi)輕松地消化數(shù)據(jù)。通過連續(xù)顯示數(shù)據(jù),可以保持觀眾的興趣。
利用圖表動畫來增強觀眾體驗的優(yōu)勢很明顯,因此讓我們繼續(xù)使用Highcharts創(chuàng)建動畫交互式圖表。
上面的演示是使用選項defer下的animation選項創(chuàng)建的。要啟用,只需defer為需要動畫的每個圖表添加選項。請確保間隔行的渲染時間(1000毫秒),以避免同時或以錯誤的順序渲染兩個或多個序列:
series: [ { showInLegend: false, animation: { defer: period } }, { showInLegend: false, animation: { defer: period * 2 } }, ...要獲得每一行的進度時間效果,可以animation在下面的選項中添加一個設(shè)置值plotOptions:
plotOptions: { series: { color: "#ABB2B9", marker: { enabled: false }, label: { connectorAllowed: false }, animation:{ duration:1200 } } },就是這樣,簡單有效:).
歡迎使用下面的評論部分與動畫圖表分享您的經(jīng)驗。
APS幫助提升企業(yè)生產(chǎn)效率,真正實現(xiàn)生產(chǎn)計劃可視化呈現(xiàn)與控制,快速有效響應(yīng)不同場景的生產(chǎn)計劃,提高準(zhǔn)時交貨能力,提高產(chǎn)能和資源利用率
想要購買Highcharts正版授權(quán),或了解更多產(chǎn)品信息請點擊
本站文章除注明轉(zhuǎn)載外,均為本站原創(chuàng)或翻譯。歡迎任何形式的轉(zhuǎn)載,但請務(wù)必注明出處、不得修改原文相關(guān)鏈接,如果存在內(nèi)容上的異議請郵件反饋至chenjj@fc6vip.cn
文章轉(zhuǎn)載自: