Highcharts.jsでドーナツグラフを表示させたい！ーその３.タイマー機能を作る

JavaScript

2017.06.13

『ドラゴンクエストⅪ』を、嫁の分も合わせて2本予約をした kouraku です。
『GUNDAM VERSUS』は7月6日発売、そして『ドラゴンクエストⅪ』は7月29日発売・・・
今からこの怒涛の7月をどう乗りこなすか、悩み事は尽きませんね。

さて今回は、前回作成したドーナツグラフを元に、更に応用してタイマー機能を作っちゃおう！
という内容をメモメモ。

【前回の記事】

【この記事で必要な知識】

HTML/CSS
JavaScript
jQuery

前回のおさらい

前回作成したドーナツグラフは、以下のようなものでした。

今回は、このサンプルを元にタイマー機能を作ります。

タイマー用にHTMLを変更する

まずはHTMLを少しだけ変更します。

[pug]
.wrap
  #container
  .count-wrap
    .num 60

ドーナツグラフを表示させる #container を .wrap で囲んで、さらにカウンター要素（.count-wrap）を追加しました。
HTML側の準備はとりあえずこんなところでしょうか。

スタイルは、#container に表示しているドーナツグラフの中央に .count-wrap .num の数値が来るように配置させるよう記述を追加します。（詳細は本記事下部にある結果にてご確認ください。）

Highcharts.js のオプションに「events」を追加する

オプションにカウントダウン処理を追加する前に、いくつか変数を用意しておきます。

[js]
var $strTime = $('.num'),  // .numの数字を取得および書き換えなどで使用
    curTime = parseFloat($strTime.text()),  // 現在の時間（残り時間）
    numMax = curTime,  // 初期設定時間
    numDiff = 0,  // 経過時間（初期設定時間－現在の時間）
    timeSpan = 1000;  // カウント（1秒ごと）

ざっとこんなもんでしょうか。

では、オプションに入ります。
まずは、何かしらの処理を追加するために、「chart」の中に「events」を追記します。
場所は以下の通りです。

[js]
var myChart = Highcharts.chart('container', {
  chart: {
    // どんなタイプのグラフを表示させるか
    type: 'pie'  ← ここの下に続けて「events」を追加します
  },
  title: {
   :

追加すると、

[js]
var myChart = Highcharts.chart('container', {
  chart: {
    // どんなタイプのグラフを表示させるか
    type: 'pie',
    events: {
      load: function() {
      }
    }
  },
  title: {
   :

こんな感じですね。ロード時に処理が始まるように、更に「load」を「events」に追加してあります。

「events」にタイマー処理を追加する

では、「load」の中にタイマー処理を追加してみましょう。
大体以下のような感じになります。

[js]
var series = this.series[0];  // 1件目のデータを取得

var setTimer = setInterval(function () {
  curTime--;
  numDiff++;
  $strTime.text(curTime);
  if (curTime <= 0) {
    clearInterval(setTimer);
  }
  series.setData([curTime, numDiff]);  // 1件目のデータとして設定
}, timeSpan);

setInterval で1秒ずつ回して、現在の時間（curTime）を1ずつ引いていき、経過時間（numDiff）は1ずつ増やしています。そして、現在の時間が0以下になったら clearInterval で止める・・・と至ってシンプルな処理です。

ちょっと分かり辛いのは・・・

var series = this.series[0];  // 1件目のデータを取得

と

  series.setData([curTime, numDiff]);  // 1件目のデータとして設定

ですね。でも、「series」の設定を見れば、納得するでしょう。

タイマー処理の結果を「series」で受取表示させる

前回サンプルの「series」の内容は

// 表示させるデータ
series: [
  {
    name: 'Ratio',
    data: [
      // 進捗25%、残り75%
      [ 'progress', 25 ],
      [ 'remaining', 75 ]
    ]
  }
]

こんな感じでした。

今回は、このサンプルに対し、

name は「Count」に変更
label は不要なので非表示にする（表示させると変な動きになります）
data に、タイマー処理の結果を入れる（それぞれ「passage」、「remining」と命名）

という書き換えを行っていきます。すると、こんな感じになります。

// 表示させるデータ
series: [
  {
    name: "Count",
    dataLabels: {
      enabled: false,
    },
    data: [["remining", curTime], ["passage",numDiff]]
  }
],

ここまでをまとめた結果、次のような表示になります。

はい、無事タイマー機能ができました。