Chart.jsのアニメーションの発動タイミングについて

###はじめに
お読み下さりありがとうございます。
こちらの記事を参考にjQueryを使用してChart.jsを使用しているのですが、
スクロール位置がChart.jsを使用している要素に来たときにアニメーションをさせる、というやり方がわからず
今回ご質問させていただきました。
JavaScriptならびにjQueryはあまり得意ではないのですが、何卒ご教授頂けますと幸いです。
なお、下記のコードは実際のコードから必要部分のみの抜粋したものとなっております。

###該当のソースコード

html
1<!DOCTYPE html>
2<html>
3<head>
4	<meta charset="UTF-8">
5	<style>
6		#wrapper{width:100%}
7		#chart{list-style:none;display:flex}
8		.item{width:calc(100% / 4)}
9	</style>
10</head>
11<body>
12	<div id="wrapper">
13		<ul id="chart">
14			<li class="item">
15				<canvas id="chart1" width="220" height="180"></canvas>
16			</li>
17			<li class="item">
18				<canvas id="chart2" width="220" height="180"></canvas>
19			</li>
20			<li class="item">
21				<canvas id="chart3" width="220" height="180"></canvas>
22			</li>
23			<li class="item">
24				<canvas id="chart4" width="220" height="180"></canvas>
25			</li>
26		</ul>
27	</div>
28
29
30	<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
31	<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.1/Chart.bundle.min.js"></script>
32	<script>
33		$(function (){
34			const config = {
35				type: 'bar',
36				data: barChartData,
37				responsive : false,
38				options: {
39					legend: {display: false},
40					tooltips: {enabled: false},
41				}
42			}
43			const context = $("#chart1")
44			const chart = new Chart(context,config)
45		})
46		const barChartData = {
47			labels : ["1","2","3","4","5"],
48			datasets : [
49				{
50					backgroundColor: "#b3a",
51					data : [10,55,30,70,10]
52				}
53			]
54		}
55
56		$(function (){
57			const config = {
58				type: 'bar',
59				data: barChartData2,
60				responsive : false,
61				options: {
62					legend: {display: false},
63					tooltips: {enabled: false}
64				}
65			}
66			const context = $("#chart2")
67			const chart = new Chart(context,config)
68		})
69		const barChartData2 = {
70			labels : ["1","2","3","4","5"],
71			datasets : [
72				{
73					backgroundColor: "#dec",
74					data : [10,50,40,60,20]
75				}
76			]
77		}
78
79		$(function (){
80			const config = {
81				type: 'doughnut',
82				data: barChartData3,
83				responsive: false,
84				options: {
85					legend: {display: false},
86					tooltips: {enabled: false}
87				}
88			}
89			const context = $("#chart3")
90			const chart = new Chart(context,config)
91		})
92		const barChartData3 = {
93			labels : ["1","2"],
94			datasets : [
95				{
96					backgroundColor: ["#fbd","#aaa"],
97					data : [10,90]
98				}
99			]
100		}
101
102		$(function (){
103			const config = {
104				type: 'pie',
105				data: barChartData4,
106				responsive : false,
107				options: {
108					legend: {display: false},
109					tooltips: {enabled: false}
110				}
111			}
112			const context = $("#chart4")
113			const chart = new Chart(context,config)
114		})
115		const barChartData4 = {
116			labels : ["1","2"],
117			datasets : [
118				{
119					backgroundColor: ["#2ae","#cea"],
120					data : [45,55]
121				}
122			]
123		}
124	</script>
125</body>
126</html>

###試したこと
既に投稿されているこちらの記事も参考にしてみたのですが、
書き方が違うためどう取り入れれば良いのかわからなくなってしまいました。

###補足情報(言語/FW/ツール等のバージョンなど)
確認環境はMac OSX El Capitan/Google Chrome62.0.3202.94です。

以上、何卒宜しくお願い致します。

行動規範の内容に同意します

回答1件

ベストアンサー

下記ページを参考にして組んでみました。
http://on-ze.com/archives/2679

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <style>
        #wrapper{width:100%}
        #chart{list-style:none;display:flex}
        .item{width:calc(100% / 4)}
    </style>
</head>
<body>
    <div id="wrapper">
		<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
        <ul id="chart">
            <li class="item">
                <canvas id="chart1" width="220" height="180"></canvas>
            </li>
            <li class="item">
                <canvas id="chart2" width="220" height="180"></canvas>
            </li>
            <li class="item">
                <canvas id="chart3" width="220" height="180"></canvas>
            </li>
            <li class="item">
                <canvas id="chart4" width="220" height="180"></canvas>
            </li>
        </ul>
		<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
    </div>


    <script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.1/Chart.bundle.min.js"></script>
	<script src="jquery.inview-master/jquery.inview.min.js"></script>
    <script>
		$('#chart').on('inview', function() {
				$(function (){
				const config = {
					type: 'bar',
					data: barChartData,
					responsive : false,
					options: {
						legend: {display: false},
						tooltips: {enabled: false},
					}
				}
				const context = $("#chart1")
				const chart = new Chart(context,config)
			})
			const barChartData = {
				labels : ["1","2","3","4","5"],
				datasets : [
					{
						backgroundColor: "#b3a",
						data : [10,55,30,70,10]
					}
				]
			}

			$(function (){
				const config = {
					type: 'bar',
					data: barChartData2,
					responsive : false,
					options: {
						legend: {display: false},
						tooltips: {enabled: false}
					}
				}
				const context = $("#chart2")
				const chart = new Chart(context,config)
			})
			const barChartData2 = {
				labels : ["1","2","3","4","5"],
				datasets : [
					{
						backgroundColor: "#dec",
						data : [10,50,40,60,20]
					}
				]
			}

			$(function (){
				const config = {
					type: 'doughnut',
					data: barChartData3,
					responsive: false,
					options: {
						legend: {display: false},
						tooltips: {enabled: false}
					}
				}
				const context = $("#chart3")
				const chart = new Chart(context,config)
			})
			const barChartData3 = {
				labels : ["1","2"],
				datasets : [
					{
						backgroundColor: ["#fbd","#aaa"],
						data : [10,90]
					}
				]
			}

			$(function (){
				const config = {
					type: 'pie',
					data: barChartData4,
					responsive : false,
					options: {
						legend: {display: false},
						tooltips: {enabled: false}
					}
				}
				const context = $("#chart4")
				const chart = new Chart(context,config)
			})
			const barChartData4 = {
				labels : ["1","2"],
				datasets : [
					{
						backgroundColor: ["#2ae","#cea"],
						data : [45,55]
					}
				]
			}
		});
        
    </script>
</body>

まず大量の<br>はスクロールさせるために適当に置いてます。
他にやったことは、こちらのページでzipをダウンロードしたら解凍してフォルダごと設置します。そうしたらあとは

<script src="jquery.inview-master/jquery.inview.min.js"></script>

を設置して、

$('#chart').on('inview', function() {
	
});

の中に元々yuna_star2さんが書いていたプログラムをぶち込んだだけです。期待通りの動きじゃなかったらすみません。

投稿2017/11/27 07:30

退会済みユーザー

総合スコア0

yuna_star2

2017/11/27 08:06

早速のご回答ありがとうございました…！教えて頂いた方法で無事解決いたしました。こんな簡単に解決出来ることだったのですね…知識不足でお恥ずかしい限りです。本当にありがとうございました！

行動規範の内容に同意します

あなたの回答

tips

プレビュー

行動規範の内容に同意します

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

15分調べてもわからないことは
teratailで質問しよう！

ただいまの回答率
85.48%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう！

Chart.jsのアニメーションの発動タイミングについて

関連した質問