Pie Chart Example

pie-chart.js

(function () {
    'use strict';

    // easeOutBounceはVelocity.jsに実装がないので独自に追加しています
    // see: https://github.com/danro/easing-js
    Velocity.Easings.easeOutBounce = function (pos) {
        if ((pos) < (1 / 2.75)) {
            return (7.5625 * pos * pos);
        } else if (pos < (2 / 2.75)) {
            return (7.5625 * (pos -= (1.5 / 2.75)) * pos + 0.75);
        } else if (pos < (2.5 / 2.75)) {
            return (7.5625 * (pos -= (2.25 / 2.75)) * pos + 0.9375);
        }
        return (7.5625 * (pos -= (2.625 / 2.75)) * pos + 0.984375);
    };

    /**
     * 円弧専用 d属性出力関数 2
     * @param {number} cx - 中心のx座標
     * @param {number} cy - 中心のy座標
     * @param {number} r - 半径
     * @param {number} a - 角度 (0 <= a < 360)
     * @param {number} s - 傾き (0 <= s)
     * @param {number} f - 1: 時計回り、0: 反時計回り
     * @returns {string} d属性
     */
    var d = function (cx, cy, r, a, s, f) {
        var rad1 = (s * (f * 2 - 1) - 90) / 180 * Math.PI,
            rad2 = ((a + s) * (f * 2 - 1) - 90) / 180 * Math.PI,
            params = [
                cx + r * Math.cos(rad1), cy + r * Math.sin(rad1),
                r, r,
                a > 180 && 1 || 0,
                f,
                cx + r * Math.cos(rad2), cy + r * Math.sin(rad2),
                cx, cy
            ];

        return params.reduce(function (str, param) {
            return str.replace('%d', param);
        }, 'M %d,%d A %d,%d 0 %d,%d %d,%d L %d,%d Z');
    };

    document.addEventListener('DOMContentLoaded', function () {
        // パイチャート上でマウスをホバーさせるとラベルが表示される部分の処理
        Array.prototype.forEach.call(document.querySelectorAll('.svgframe'), function (svgframe) {
            Array.prototype.forEach.call(svgframe.querySelectorAll('.pie'), function (pie, index) {
                var label = svgframe.querySelectorAll('.label')[index];

                pie.addEventListener('mouseenter', function () {
                    this.style.opacity = '0.6';
                    label.style.display = 'block';
                }, false);
                pie.addEventListener('mouseleave', function (evt) {
                    this.style.opacity = '';
                    label.style.display = 'none';
                }, false);
                pie.addEventListener('mousemove', function (evt) {
                    label.style.left = (evt.offsetX - 28) + 'px';
                    label.style.top = (evt.offsetY - 56) + 'px';
                }, false);
            });
        });

        // 開票結果ボタンがクリックされたときの処理
        document.querySelector('#button').addEventListener('click', function () {
            var that = this,
                path = document.querySelectorAll('#results path'),
                len = path.length,
                a = [
                    360 * 50.86 / 100,
                    360 * 31.12 / 100,
                    360 * 11.28 / 100,
                    360 * 5.01 / 100,
                    360 * 1.28 / 100,
                    360 * 0.45 / 100
                ],
                ro = 0,
                speed = 6000 / a[0],
                p1 = Promise.resolve(),
                p2 = Promise.resolve();

            // IEのアニメーション部分
            p1 = p1.then(function () {
                return Velocity(path[0], {
                    tween: a[0]
                }, {
                    duration: a[0] * speed,
                    easing: 'easeOutBounce',
                    progress: function (el, c, r, s, t) {
                        el[0].setAttribute('d', d(150, 170, 150, t, 0, 1));
                    }
                });
            });
            // IE以外のアニメーション部分
            for (len - 1; len > 0; len--) {
                p2 = p2.then(function (i) {
                    return function () {
                        return Velocity(path[i], {
                            tween: a[i]
                        }, {
                            duration: a[i] * speed,
                            easing: 'easeOutBounce',
                            progress: function (el, c, r, s, t) {
                                el[0].setAttribute('d', d(150, 170, 150, t, ro, 0));
                            },
                            complete: function () {
                                ro += a[i];
                            }
                        });
                    };
                }(len));
            }

            // 繰り返し実行できるよう画面の初期化処理
            Array.prototype.forEach.call(document.querySelectorAll('#results path'), function (path) {
                path.setAttribute('d', '');
            });
            document.querySelector('#results rect').style.display = '';
            document.querySelector('#results g').style.display = 'none';

            // アニメーション実行中はボタン抑止
            this.disabled = true;

            // IEのアニメーションとIE以外のアニメーション双方が終了するのを待ち合わせる
            Promise.all([p1, p2]).then(function () {
                document.querySelector('#results g').style.display = '';
                // ボタン抑止解除
                that.disabled = false;
            });
        }, false);
    }, false);
    
}());