Highcharts｜Animated charts with Highcharts

這邊將說明如何利用 Highchart 選項建立交互式動畫圖表。 動畫圖表可以提供一種強大而有效的方式來引起對數據某些方面的注意。動畫可以讓觀眾以適中的速度更深入地了解數據，而不是讓觀眾一下子被太多的數據淹沒。 下圖顯示了 1980 年至 2020 年的北極海冰範圍：

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/series-label.js"></script>
<script src="https://code.highcharts.com/modules/data.js"></script>

<div id="container"></div>
<pre id="csv" style="display:none">
month,1980,1990,2000,2010,2012,2020
Jan,14.86,14.78,14.22,13.74,13.73,13.65
Feb,15.96,15.58,15.14,14.58,14.55,14.69
Mar,16.04,15.87,15.22,15.14,15.20,14.78
Apr,15.43,14.65,14.56,14.66,14.63,13.73
May,13.79,13.23,13.15,12.87,13.01,12.36
Jun,12.20,11.64,11.67,10.59,10.67,10.58
Jul,10.10,9.25,9.51,8.07,7.67,7.28
Aug,7.98,6.80,7.17,5.87,4.72,5.08
Sep,7.67,6.14,6.25,4.87,3.57,3.92
Oct,9.18,8.48,8.38,6.98,5.89,5.28
Nov,11.38,11.08,10.32,9.61,9.39,8.99
Dec,13.59,13.11,12.64,11.83,12.01,11.77</pre>

.highcharts-figure,
.highcharts-data-table table {
  min-width: 360px;
  max-width: 800px;
  margin: 1em auto;
}

.highcharts-data-table table {
  font-family: Verdana, sans-serif;
  border-collapse: collapse;
  border: 1px solid #ebebeb;
  margin: 10px auto;
  text-align: center;
  width: 100%;
  max-width: 500px;
}
.highcharts-data-table caption {
  padding: 1em 0;
  font-size: 1.2em;
  color: #555;
}
.highcharts-data-table th {
  font-weight: 600;
  padding: 0.5em;
}
.highcharts-data-table td,
.highcharts-data-table th,
.highcharts-data-table caption {
  padding: 0.5em;
}
.highcharts-data-table thead tr,
.highcharts-data-table tr:nth-child(even) {
  background: #f8f8f8;
}
.highcharts-data-table tr:hover {
  background: #f1f7ff;
}

Javascript

let period = 1000; //1sec

Highcharts.chart("container", {
  chart: {
    type: "spline",
    backgroundColor:"#fceee4"
  },

  title: {
    text: "The Arctic Sea Ice extent from 1980 to 2020"
  },

  subtitle: {
    text: "Source: National Snow and Ice Data Center"
  },

  xAxis: {
    crosshair: {
      width: 2
    }
  },

  yAxis: {
    title: {
      text: "Million of square kilometers"
    }
  },

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

  data: {
    csv: document.getElementById("csv").innerHTML
  },

  tooltip: {
    shared: true,
    valueSuffix: " million ㎢"
  },

  series: [
    {      
      animation: {
        defer: period*0
      }
    },
    {      
      animation: {
        defer: period
      }
    },
    {
      animation: {
        defer: period * 2
      }
    },
    {
      animation: {
        defer: period * 3
      }
    },
    {
      color: "#E74C3C",
      animation: {
        defer: period * 4
      }
    },
    {
      color: "#3498DB",
      animation: {
        defer: period * 5
      }
    }
  ]
});

上面的圖表顯示了六個不同的線；（四）灰線代表1980年、1990年、2000年和2010年的數據；藍線代表 2020 年的最新測量值，紅線顯示 2012 年測量的最低記錄。 如果沒有動畫，圖表可能會使觀眾不知所措，從而需要額外的時間和認知處理，來理解數據圖表達的展示。加上動畫，觀眾可以毫不費力地在短時間內消化數據。由於數據被連續顯示，觀眾的興趣得以維持。 利用圖表動畫來增強觀眾體驗的優勢顯而易見，所以讓我們繼續使用 Highcharts 創建動畫交互式圖表。 上面的 demo 是使用 optiondefer 下的 option 創建的 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
      }
    }
  },

就是這樣，簡單有效。動畫是一種增加說服力的解決方式，可以將數據可視化並幫助觀眾獲得更深入的洞察力。