2017年3月27日月曜日

progressbar.js の circle を試してみた

概要

progressbar.js を試してみました
いろいろな形でプログレスバーを作成できるライブラリです
今回はサークルのプログレスバーを試してみました
HTML + JavaScript ファイルを作成して nginx の DocumentRoot に対してしてサクッと Chrome で確認します

環境

  • Mac OS X 10.12.3
  • Chrome 56.0.2924.87 (64-bit)
  • progressbar.js 1.0.1

workspace 準備

  • nginx
  • cd /usr/local/var/www/
  • mkdir p
  • cd p

で作業します
nginx を想定しています

ライブラリインストール

index.html の作成

  • vim index.html
<html>
<head>
  <link href="https://fonts.googleapis.com/css?family=Raleway:400,300,600,800,900" rel="stylesheet" type="text/css">
  <link href="./myprogress.css" rel="stylesheet" type="text/css">
  <script type="text/javascript" src="./progressbar.min.js"></script>
</head>
<body>
  <div id="container"></div>
  <script type="text/javascript" src="./myprogress.js"></script>
</body>
</html>

container の div タグにプログレスバーを描画します
ダウンロードした progressbar.min.js のインクルードの他に自作の css と js とフォント用の CSS もインクルードしています

myprogress.js の作成

  • vim myprogress.js
var bar = new ProgressBar.Circle(container, {
  color: '#aaa',
  strokeWidth: 4,
  trailWidth: 1,
  easing: 'easeInOut',
  duration: 1400,
  from: { color: '#aaa', width: 1 },
  to: { color: '#848484', width: 4 },
  // Set default step function for all animate calls
  step: function(state, circle) {
    circle.path.setAttribute('stroke', state.color);
    circle.path.setAttribute('stroke-width', state.width);

    var value = Math.round(circle.value() * 10);
    if (value === 10) {
      circle.setText('<font size="5px">Max</font><br><div align="center">' + value + '</div>');
    } else {
      circle.setText('<font size="5px">Containers</font><br><div align="center">' + value + '</div>');
    }

  }
});
bar.text.style.fontFamily = '"Raleway", Helvetica, sans-serif';
bar.text.style.fontSize = '2rem';

bar.animate(1.0);  // Number from 0.0 to 1.0

描画のメイン処理になります
今回の記事のポイント部分になります

描画する id タグ container を指定して ProgressBar.Circle でオブジェクトを作成しています
その引数としていろいろな値を与えることでデザインがアニメーション速度などを変更することができます

最後の bar.animate でどこまで描画するか割合を指定します
1.0 なら最後まで描画します

myprogress.css の作成

  • vim myprogress.css
#container {
  margin: 20px;
  width: 200px;
  height: 200px;
  position: relative;
}

動作確認

あとはブラウザで http://localhost:8080/p/ にアクセスするとプログレスバーのデモが確認できると思います
try_progressbar_js.png

最後に

progressbar.js を試してみました
アニメーションやデザインが今風でキレイなところが気に入りました

円グラフではないので、凡例などで 2 色分表示とかはできないみたいです

参考サイト

0 件のコメント:

コメントを投稿