エラー内容について
ポートフォリオを制作するにあたって、データを視覚的に見れるようにするためにChart.jsを使用しました。
実装し確認をしていると、グラフが表示されない時があり、更新した場合表示されるという現象が起きました。
その時の失敗の理由について書いていきたいと思います。
（フレームワークはRuby on Railsを使用しました。）
解説
問題のあったコードについて
様々なページでグラフを表示させたいため、部分テンプレートでChart.jsを利用したグラフの実装を行いました。
_line_graph.html.erb
<canvas id="line_graph"></canvas>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
var ctx = document.getElementById('pie_graph');
var myChart = new Chart(ctx, {
type: 'pie',
data: {
// ここに表示させたいグラフの内容を記述する。
},
options: {
}
});
</script>
この中に記述されている、
_line_graph.html.erb
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
が共通化したページに記述されていることが原因でchart.jsが表示されない現象が起きていました。
何故そのような現象が起きたのか？
原因はTurbolinksの、headタグはマージしbodyタグは差し替えることで画面遷移が起きたように見せかける仕様の為でした。
そのため,
_line_graph.html.erb
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
がbodyタグに記述されているため、内部的には置き換えられるだけで、実際にscriptタグを読み込んで貰えていなかったので起きてしまったようです。
解決方法
application.html.erb
<!DOCTYPE html>
<html>
<head>
<title>hoge</title>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
</head>
<body>
</body>
</html>
application.html.erbのheadタグの中にscriptタグを移動しました。
こうすることでscriptタグをTurbolinksが読み込んでくれるため画面遷移後に更新を行わなくてもグラフを表示できるようになります。