JSのGraph.jsとSwiper.jsが同時に表示できない。

Question

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

該当のソースコード

<div class="float", style="height: 0;">
        </div>
      <div class="swiper-wrapper">
        <div class="swiper-slide">slide 1</div>
        <div class="swiper-slide">slide 2</div>
        <div class="swiper-slide">Slide 3</div>
        <div class="swiper-slide">Slide 4</div>
        <div class="swiper-slide">Slide 5</div>
        <div class="swiper-slide">Slide 6</div>
      </div>
      <div class="swiper-pagination"></div>
      <div class="swiper-button-next"></div>
      <div class="swiper-button-prev"></div>
      </div>


    <div>
      <canvas id="allChart"></canvas>
    </div>

    <div>
      <canvas id="myChart"></canvas>
    </div>

//swiper.js
$(document).on('turbolinks:load', function(){
  var swiper = new Swiper('.swiper-container', {
   slidesPerView: 1,
   direction: 'vertical',
    pagination: {
      el: '.swiper-pagination',
      clickable: true,
    },
    navigation: {
      nextEl: '.swiper-button-next',
      prevEl: '.swiper-button-prev',
    },
  });
});


//graph.js

$(document).on('turbolinks:load', function(){
  var ctx = document.getElementById('myChart').getContext('2d');
  var myChart = new Chart(ctx, {
    type: 'line',
    data: {
      labels: gon.labels,
      datasets: [{
        label: '商品名',
        data: gon.datas,
        backgroundColor: "rgba(153,255,51,0.6)"
      }]
    },
  });
});


$(document).on('turbolinks:load', function(){
  var ctx = document.getElementById('allChart').getContext('2d');
  var myChart = new Chart(ctx, {
    type: 'line',
    data: {
      labels: gon.labels,
      datasets: [{
        label: '商品名',
        data: gon.datas,
        backgroundColor: "rgba(153,255,51,0.6)"
      }]
    },
  });
});

試したこと

Uncaught TypeError: Cannot read property 'getContext' of null
エラー文はでていますが、グラフはちゃんとでています。
しかし、swiperが動かなくなっています。
graph.jsを消すとスワイパーはうごくようになります。

よろしくお願いします！

Comments

[m.ts10806]

グラフを表示させる先を逆にしてみるとどうなりますか？

[退会済みユーザー]

ひとつのファイルにまとめて順番を変えてみたら表示できました。ただ、コンソールにはUncaught TypeError: Cannot read property 'getContext' of nullが出てしまいます。

Answer 1

本回答は一般的なcanvas要素に関わる知見によるものです. 各種ライブラリの特性を考慮したものではありません.

---

エラーはturbolinks:loadイベントが発生した時点でDOM上に(#myChart等の)canvas要素が存在しないにも関わらずgetContextメソッドを実行したことにより発生しています.

本問題は, Turbolinks×jQuery×Graph.js×Swiper.jsにおけるノードおよびスクリプトの読み込み順という**極めてデリケートかつ検証の難しい(同等の環境が少なく, 知見の得られにくい)**ものと考えられます.

幸い

エラー文はでていますが、グラフはちゃんとでています。

とのことですので, 対症療法的ですがグラフの描画処理を「canvas要素が見つかった時に限り実行する」ようにすれば良いでしょう.

$(document).on('turbolinks:load', function(){
  var canvas = document.getElementById('myChart');
  //見つからなければ処理をスキップする
  if(!canvas){return;}
  var ctx = canvas.getContext('2d');
  var myChart = new Chart(ctx, {
    type: 'line',
    data: {
      labels: gon.labels,
      datasets: [{
        label: '商品名',
        data: gon.datas,
        backgroundColor: "rgba(153,255,51,0.6)"
      }]
    },
  });
});

Comments

[退会済みユーザー]

一発で治りました。ありがとうございます！