Create a gist now

Instantly share code, notes, and snippets.

What would you like to do?
Pie Chart Example
(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);
}());
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment