canvasチャートの表示指定について

Question

chart.jsを使いドーナツチャートを作り、カウンターjsで数値をカウントさせるものを
ページの途中に設置したいと思っております。
動き自体はこのような形です。
http://me.hateblo.jp/entry/2013/11/26/213212

動作自体はきちんと出来るのですが、そのセクションにたどり着く前にアニメーションが終わってしまいます。

チャートがあるセクションにたどり着いた際にアニメーションを開始させるには、どの様な指定をすれば良いのでしょうか？

Answer 1

IntersectionObserverを使って, ドーナツチャートがスクリーンに入った(入りきった)ことを検知してからアニメーションを開始するようすればよいでしょう.

IntersectionObserverの使い方の例

const observer = new IntersectionObserver(
	changes => changes[0].intersectionRatio >= 1 ? draw() : null,
	{threshold: 1}
);
observer.observe(canvas);
function draw(){
	canvas.width = canvas.height = 200;
	const ctx = canvas.getContext("2d");
	ctx.fillStyle = "blue";
	ctx.fillRect(0, 0, 200, 200);
	observer.unobserve(canvas);
}

参考
https://developer.mozilla.org/en-US/docs/Web/API/IntersectionObserver

Comments

[MOMONUTS]

ご回答ありがとうございます。
IntersectionObserverというものがあるのですね！！

参考ページを拝見し、どういうものかは理解出来たのですが、それをどこに入れれば良いのか分からずで....

今ドーナツチャートの指定部分は
<script>
var data = [
{
value: 10,
color:"#000"
},
{
value : 20,
color:"#111"
},
{
value : 30,
color:"#222"
},
{
value : 40,
color:"#333"
}
];
var ctx = document.getElementById("mychart").getContext("2d");
new Chart(ctx).Doughnut(data,{
segmentShowStroke : false,
segmentStrokeWidth : 1,
percentageInnerCutout :60,
animation : true,
animationSteps : 200,
animationEasing : "easeOutQuint",
animateRotate : true,
animateScale : false,
onAnimationComplete : null
});
</script>
の様にしており、カウンター部分は
<div class="per11">
<span class="count" data-num="10">0</span><span class="per">%</span>
</div>
の様になっております。

この中にIntersectionObserver指定を入れ込む形になるのでしょうか。

初歩的質問で大変申し訳ございませんが、ご教授願えれば幸いですm(_ _)m

[MOMONUTS]

色々調べたのですが、IntersectionObserverはまだ不安定だったりブラウザによっては対応していない様ですので、別の方法があればと模索中です。

[defghi1977]

JavaScriptによるpolyfillもあるようなので, いろいろ試してみて下さい.

Answer 2

inview.jsを使うことで解決いたしました。
ありがとうございました。

Comments

[defghi1977]

できれば配布サイトなどへのリンクを追記願います.