日本高清www午色夜com,日韩在线观看视频,97影院在线观看

帶有Highcharts的動(dòng)畫圖表介紹

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

概述：本教程將說明如何利用智能的Highchart選項(xiàng)創(chuàng)建交互式動(dò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)建交互式動(dòng)畫圖表。

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

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

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

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

利用圖表動(dòng)畫來增強(qiáng)觀眾體驗(yàn)的優(yōu)勢(shì)很明顯，因此讓我們繼續(xù)使用Highcharts創(chuàng)建動(dòng)畫交互式圖表。
上面的演示是使用選項(xiàng)defer下的animation選項(xiàng)創(chuàng)建的。要啟用，只需defer為需要?jiǎng)赢嫷拿總€(gè)圖表添加選項(xiàng)。請(qǐ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
      }
    }
  },

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

歡迎使用下面的評(píng)論部分與動(dòng)畫圖表分享您的經(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)品信息請(qǐng)點(diǎn)擊

標(biāo)簽：

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

文章轉(zhuǎn)載自：

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