JSのGraph.jsとSwiperが表示できない。
Rubyonrailsで作業をしているのですが、
swiper.jsとgraph.jsを使っています。
片方ずつなら表示可能なのですが、両方を使おうとすると
片方が動いていない(読み込んでくれない)というエラーがおきています。
発生している問題・エラーメッセージ
Uncaught TypeError: Cannot read property 'getContext' of null at HTMLDocument.<anonymous> (graph.self-be54afaee9a2a7b9018d88b8c63ae30d4180f8b11bcc7a191e493b0ffaa42505.js?body=1:2) at HTMLDocument.dispatch (jquery.self-bd7ddd393353a8d2480a622e80342adf488fb6006d667e8b42e4c0073393abee.js?body=1:5227) at HTMLDocument.elemData.handle (jquery.self-bd7ddd393353a8d2480a622e80342adf488fb6006d667e8b42e4c0073393abee.js?body=1:4879) at Object.Turbolinks.dispatch (turbolinks.self-2db6ec539b9190f75e1d477b305df53d12904d5cafdd47c7ffd91ba25cbec128.js?body=1:6) at e.notifyApplicationAfterPageLoad (turbolinks.self-2db6ec539b9190f75e1d477b305df53d12904d5cafdd47c7ffd91ba25cbec128.js?body=1:7) at e.pageLoaded (turbolinks.self-2db6ec539b9190f75e1d477b305df53d12904d5cafdd47c7ffd91ba25cbec128.js?body=1:7) at turbolinks.self-2db6ec539b9190f75e1d477b305df53d12904d5cafdd47c7ffd91ba25cbec128.js?body=1:6
該当のソースコード
html
1<div class="float", style="height: 0;"> 2 </div> 3 <div class="swiper-wrapper"> 4 <div class="swiper-slide">slide 1</div> 5 <div class="swiper-slide">slide 2</div> 6 <div class="swiper-slide">Slide 3</div> 7 <div class="swiper-slide">Slide 4</div> 8 <div class="swiper-slide">Slide 5</div> 9 <div class="swiper-slide">Slide 6</div> 10 </div> 11 <div class="swiper-pagination"></div> 12 <div class="swiper-button-next"></div> 13 <div class="swiper-button-prev"></div> 14 </div> 15 16 17 <div> 18 <canvas id="allChart"></canvas> 19 </div> 20 21 <div> 22 <canvas id="myChart"></canvas> 23 </div>
js
1//swiper.js 2$(document).on('turbolinks:load', function(){ 3 var swiper = new Swiper('.swiper-container', { 4 slidesPerView: 1, 5 direction: 'vertical', 6 pagination: { 7 el: '.swiper-pagination', 8 clickable: true, 9 }, 10 navigation: { 11 nextEl: '.swiper-button-next', 12 prevEl: '.swiper-button-prev', 13 }, 14 }); 15}); 16 17 18//graph.js 19 20$(document).on('turbolinks:load', function(){ 21 var ctx = document.getElementById('myChart').getContext('2d'); 22 var myChart = new Chart(ctx, { 23 type: 'line', 24 data: { 25 labels: gon.labels, 26 datasets: [{ 27 label: '商品名', 28 data: gon.datas, 29 backgroundColor: "rgba(153,255,51,0.6)" 30 }] 31 }, 32 }); 33}); 34 35 36$(document).on('turbolinks:load', function(){ 37 var ctx = document.getElementById('allChart').getContext('2d'); 38 var myChart = new Chart(ctx, { 39 type: 'line', 40 data: { 41 labels: gon.labels, 42 datasets: [{ 43 label: '商品名', 44 data: gon.datas, 45 backgroundColor: "rgba(153,255,51,0.6)" 46 }] 47 }, 48 }); 49}); 50
試したこと
Uncaught TypeError: Cannot read property 'getContext' of null
エラー文はでていますが、グラフはちゃんとでています。
しかし、swiperが動かなくなっています。
graph.jsを消すとスワイパーはうごくようになります。
よろしくお願いします!
回答1件
あなたの回答
tips
プレビュー