Chart.jsを導入したよ

以前、Highchartを使用したんですけどパーセンテージを表示したくて周りからのアドバイスもありchart.jsに切り替えました。具体的に言うと、参考にした記事があるのでそちらを表示します。

emn178.github.io

上記の記事を用いて、chart.jsを導入しました。

ただ、途中ローカルでは起動できたけど、デプロイ時にエラーになる現象が発生しました。以下、エラー文のコードになっております。

ERROR in ./app/javascript/packs/application.js
remote:        Module not found: Error: Can't resolve 'Chart.js' in '/tmp/build_8d148df7/app/javascript/packs'
remote:         @ ./app/javascript/packs/application.js 11:0-19
remote:        
remote: 
remote:  !
remote:  !     Precompiling assets failed.
remote:  !

正確になぜ起きたか判明仕切れてないのですが、一応解決しました。 application.js

require("chart.js")

上記のコードが原因なんですけど元々ビューファイルで以下のようにchart.jsを呼び出すような形を取っていて (CDN Linkという方法らしい。）

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.bundle.js"></script>
 <script src="https://cdn.jsdelivr.net/gh/emn178/chartjs-plugin-labels/src/chartjs-plugin-labels.js"></script>

  <script>
  var ctx = document.getElementById("myPieChart");
  var myPieChart = new Chart(ctx, {
    type: 'pie',
    data: {
      labels: ["cute", "singing", "dance", "variety", "acting"],
      datasets: [{
          backgroundColor: [
                "#FFDDFF",
                "#FFFFCC",
                "#CCFFFF",
                "#FFDBC9",
                "#9BF9CC"
          ],
          data: [90,30,40,90,30]
      }]
    },
    options: {
      title: {
        display: true,
      },
      plugins: {
        labels: [
    {
      render: 'label',
      fontSize: 15,
      position: 'outside'
    },
    {
      render: 'percentage',
      fontSize: 15
    }
  ]
      }
    }
  });
</script>

application.jsの方のコードは、何も関係なくて必要のないコードを打ったために起きたエラーが出たと考えております。

もしかしたら今後、何か役に立つかもしれんのでアウトプットしました。

ps (12/3)

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.bundle.js"></script>
<script src="https://cdn.jsdelivr.net/gh/emn178/chartjs-plugin-labels/src/chartjs-plugin-labels.js"></script>

上記のコードはapplication.html.erbに記入したら他のビューファイルより優先的に読み込んでくれるみたい。これのおかげで、バグが一つなくなった！

参考

https://github.com/emn178/chartjs-plugin-labels

chart.jsでRailsアプリにグラフを組み込む - Qiita

Chart.js | Chart.js

GitHub - coderbydesign/chart-js-rails: Chart.js for Rails Asset Pipeline

chart.jsの円グラフの中に値を表示する - iMind Developers Blog