回答編集履歴
1
コードの修正 説明の修正
answer
CHANGED
|
@@ -6,7 +6,12 @@
|
|
|
6
6
|
|
|
7
7
|
あとはCSSでスクロールアニメーションの時間などを調節して気に入った状態にしてみてください。
|
|
8
8
|
|
|
9
|
+
ガーベージコレクションを強制実行させようと格闘しましたが上手くいかなかったので、
|
|
10
|
+
一度画面外に出てフェードアウトしたときにチャートを破棄しているのですが、再度画面に
|
|
11
|
+
入ってきたときに、前のチャートが残ってしまってます。その状態から再描画されます。
|
|
12
|
+
申し訳ありません。
|
|
9
13
|
|
|
14
|
+
|
|
10
15
|
```HTML
|
|
11
16
|
<!DOCTYPE html>
|
|
12
17
|
<html lang="ja">
|
|
@@ -41,7 +46,7 @@
|
|
|
41
46
|
.fadein {
|
|
42
47
|
opacity : 0;
|
|
43
48
|
transform : translate(0, 50px);
|
|
44
|
-
transition : all
|
|
49
|
+
transition : all 8000ms;
|
|
45
50
|
}
|
|
46
51
|
|
|
47
52
|
/* 画面内に入った状態 */
|
|
@@ -57,13 +62,22 @@
|
|
|
57
62
|
</div>
|
|
58
63
|
|
|
59
64
|
<script>
|
|
65
|
+
|
|
66
|
+
var drowing = false;
|
|
67
|
+
|
|
60
68
|
$('#doughnut07').on('inview', function(event, isInView){ /* doughnut07はidなので、#で始めなければならない */
|
|
61
69
|
/*▼▼▼スクロール効果▼▼▼*/
|
|
62
|
-
if (isInView){
|
|
70
|
+
if (isInView){ /*画面内に入ったか判定*/
|
|
63
71
|
$('#doughnut07').addClass('scrollin');
|
|
64
72
|
} else {
|
|
65
73
|
$('#doughnut07').removeClass('scrollin');
|
|
66
74
|
}
|
|
75
|
+
|
|
76
|
+
setTimeout(drawChart, 8000, isInView, drowing); /* CSSのスクロールアニメーション時間と合わせる*/
|
|
77
|
+
});
|
|
78
|
+
|
|
79
|
+
function drawChart(isInView, drowing) {
|
|
80
|
+
|
|
67
81
|
/*▼▼▼グラフ▼▼▼*/
|
|
68
82
|
var data = [
|
|
69
83
|
{
|
|
@@ -76,13 +90,46 @@
|
|
|
76
90
|
}
|
|
77
91
|
];
|
|
78
92
|
|
|
93
|
+
if (isInView && !drowing) {
|
|
79
|
-
|
|
94
|
+
window.myDoughnut = new Chart(document.getElementById("doughnut07").
|
|
80
|
-
|
|
95
|
+
getContext("2d")).Doughnut(data, {
|
|
81
|
-
|
|
96
|
+
tooltipTemplate: "<%=value%> ％",
|
|
82
|
-
|
|
97
|
+
animation:true,
|
|
83
|
-
|
|
98
|
+
enabled:false,
|
|
84
99
|
});
|
|
85
|
-
|
|
100
|
+
}
|
|
101
|
+
|
|
102
|
+
if (isInView) {
|
|
103
|
+
drowing = true;
|
|
104
|
+
} else {
|
|
105
|
+
if (myDoughnut) {
|
|
106
|
+
myDoughnut.destroy();
|
|
107
|
+
|
|
108
|
+
/*
|
|
109
|
+
// 強制ガーベージコレクション実行
|
|
110
|
+
var userAgent = window.navigator.userAgent.toLowerCase();
|
|
111
|
+
|
|
112
|
+
if (userAgent.indexOf('msie') != -1 || userAgent.indexOf('trident') != -1) {
|
|
113
|
+
//IE向けの記述
|
|
114
|
+
window.CollectGarbage();
|
|
115
|
+
} else if(userAgent.indexOf('edge') != -1) {
|
|
116
|
+
//旧Edge向けの記述
|
|
117
|
+
} else if(userAgent.indexOf('chrome') != -1) {
|
|
118
|
+
//Google Chrome向けの記述
|
|
119
|
+
window.gc();
|
|
120
|
+
} else if(userAgent.indexOf('safari') != -1) {
|
|
121
|
+
//Safari向けの記述
|
|
122
|
+
} else if(userAgent.indexOf('firefox') != -1) {
|
|
123
|
+
//FireFox向けの記述
|
|
124
|
+
} else {
|
|
125
|
+
//その他のブラウザ向けの記述
|
|
126
|
+
}
|
|
127
|
+
*/
|
|
128
|
+
|
|
129
|
+
drowing = false;
|
|
130
|
+
}
|
|
131
|
+
}
|
|
132
|
+
}
|
|
86
133
|
</script>
|
|
87
134
|
</section>
|
|
88
135
|
</article>
|