Highchartsによるアニメーション・チャート

このチュートリアルでは、スマートなHighchartオプションを活用して、インタラクティブなアニメーション・チャートを作成する方法を説明します。

アニメーション・チャートは、データの特定の側面を注目させるための強力で効果的な手段です。 ユーザーに一気に多くのデータを押し付けることなく、アニメーションは適度な速度でデータを深く理解することを可能にします。

以下のチャートは、1980年から2020年までの北極海の海氷面積を可視化したものです。

 

上記のチャートは、6つの異なる線を表示しています。 (4)つのグレーの線は、1980年、1990年、2000年、2010年のデータを、 青い線は最新の測定値2020年を表し、赤い線は2012年に測定された最低記録を表示しています。

アニメーションがない場合、チャートを見ている人はチャートに圧倒され、データが提示しようとしているストーリーを理解するためにさらに時間と認知処理が必要になる可能性があります。アニメーションがあれば、チャートを見る人は短時間でデータを簡単に理解することができます。 データが連続的に表示されるため、チャートを見ている人の興味も維持されます。

オーディエンス体験を向上させるためにチャートアニメーションを活用する利点は明らかです。 ではHighchartsでアニメーション付きインタラクティブチャートを作成する方法を見てみましょう。

上記のデモは、animationオプションの下にあるdeferオプションを使用して作成されました。「defer」オプションを有効にするには、アニメーションが必要な各チャートにdeferオプションを追加するだけです。2つ以上の系列が同時または間違った順序でレンダリングされないように、行のレンダリング時間（1000ミリ秒）を空けてるようにしてください。

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

各行の時間進行によるエフェクトを得るには、plotOptionsのanimationオプションに値を追加することができます：

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

これだけですが、シンプルで効果的です。

アニメーションは、データを視覚化し、チャートを見る人がより深い洞察を得られるようにするための効果的なソリューションです。