日韩无码视频免费,91欧美精品,亚洲日本图色

帶有Highcharts的動畫圖表介紹

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

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

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

點擊下載Highcharts最新試用版

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

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

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

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

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

利用圖表動畫來增強觀眾體驗的優勢很明顯，因此讓我們繼續使用Highcharts創建動畫交互式圖表。
上面的演示是使用選項defer下的animation選項創建的。要啟用，只需defer為需要動畫的每個圖表添加選項。請確保間隔行的渲染時間（1000毫秒），以避免同時或以錯誤的順序渲染兩個或多個序列：

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

要獲得每一行的進度時間效果，可以animation在下面的選項中添加一個設置值plotOptions：

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

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

歡迎使用下面的評論部分與動畫圖表分享您的經驗。