国产精品第,日本va在线视频播放,污软件大全

老司机夜插-理伦理片-理伦片免费-理伦片免费观看-理伦片免费看-理伦日韩-理论福利片-理论片第一页-理论片电影-理论片理论

帶有Highcharts的動畫圖表介紹

翻譯|使用教程|編輯：楊鵬連|2021-03-01 16:42:10.900|閱讀 293 次

概述：本教程將說明如何利用智能的Highchart選項(xiàng)創(chuàng)建交互式動畫圖表。

Highcharts是一款純JavaScript編寫的圖表庫，為你的Web網(wǎng)站、Web應(yīng)用程序提供直觀、交互式圖表。當(dāng)前支持折線、曲線、區(qū)域、區(qū)域曲線圖、柱形圖、條形圖、餅圖、散點(diǎn)圖、角度測量圖、區(qū)域排列圖、區(qū)域曲線排列圖、柱形排列圖、極坐標(biāo)圖等幾十種圖表類型。

點(diǎn)擊下載Highcharts最新試用版

本教程將說明如何利用智能的Highchart選項(xiàng)創(chuàng)建交互式動畫圖表。

動畫圖表可以提供強(qiáng)大有效的方法來吸引人們注意數(shù)據(jù)的某些方面。作為一次讓過多的數(shù)據(jù)使觀眾不知所措的替代方法，動畫使觀眾能夠以中等速度深入了解數(shù)據(jù)。

下圖顯示了1980年至2020年北極海冰的范圍：

上面的圖表顯示了6條不同的線；（四）灰線代表1980、1990、2000和2010年的數(shù)據(jù)；藍(lán)色線代表2020年的最新測量值，紅色線代表2012年的最低記錄。

如果沒有動畫，圖表可能會使觀眾不知所措，從而需要更多時(shí)間和認(rèn)知處理來理解數(shù)據(jù)正在嘗試的故事。當(dāng)下。通過包含動畫，觀眾可以在短時(shí)間內(nèi)輕松地消化數(shù)據(jù)。通過連續(xù)顯示數(shù)據(jù)，可以保持觀眾的興趣。

利用圖表動畫來增強(qiáng)觀眾體驗(yàn)的優(yōu)勢很明顯，因此讓我們繼續(xù)使用Highcharts創(chuàng)建動畫交互式圖表。
上面的演示是使用選項(xiàng)defer下的animation選項(xiàng)創(chuàng)建的。要啟用，只需defer為需要?jiǎng)赢嫷拿總€(gè)圖表添加選項(xiàng)。請確保間隔行的渲染時(shí)間（1000毫秒），以避免同時(shí)或以錯(cuò)誤的順序渲染兩個(gè)或多個(gè)序列：

series: [
    {
      showInLegend: false,
      animation: {
        defer: period
      }
    },
    {
      showInLegend: false,
      animation: {
        defer: period * 2
      }
    },
    ...

要獲得每一行的進(jìn)度時(shí)間效果，可以animation在下面的選項(xiàng)中添加一個(gè)設(shè)置值plotOptions：

  plotOptions: {
    series: {
      color: "#ABB2B9",
      marker: {
        enabled: false
      },
      label: {
        connectorAllowed: false
      },
      animation:{
        duration:1200
      }
    }
  },

就是這樣，簡單有效：).
動畫是一種雄辯的解決方案，用于可視化數(shù)據(jù)并幫助觀眾獲得更深刻的見解。

歡迎使用下面的評論部分與動畫圖表分享您的經(jīng)驗(yàn)。

APS幫助提升企業(yè)生產(chǎn)效率，真正實(shí)現(xiàn)生產(chǎn)計(jì)劃可視化呈現(xiàn)與控制,快速有效響應(yīng)不同場景的生產(chǎn)計(jì)劃，提高準(zhǔn)時(shí)交貨能力，提高產(chǎn)能和資源利用率

想要購買Highcharts正版授權(quán)，或了解更多產(chǎn)品信息請點(diǎn)擊

標(biāo)簽：

本站文章除注明轉(zhuǎn)載外，均為本站原創(chuàng)或翻譯。歡迎任何形式的轉(zhuǎn)載，但請務(wù)必注明出處、不得修改原文相關(guān)鏈接，如果存在內(nèi)容上的異議請郵件反饋至chenjj@fc6vip.cn

文章轉(zhuǎn)載自：

上一篇：條形碼標(biāo)簽軟件Bartender使用技巧（19）——QR Code如何設(shè)置中文下一篇：dhtmlxGantt使用教程：如何在網(wǎng)格的列中對數(shù)據(jù)進(jìn)行排序