はじめに
オリジナルアプリの作成にて、投稿に連動したグラフを作成したので作成方法をアウトプット！
導入方法
１：chart.jsをCDN経由でRailsアプリに導入
２：グラフ生成のコード記述
３：すこーしコード書き換えて投稿と連動させる
そもそもCDNってなに？
CDN（Content Delivery Network）の略で、
ウェブコンテンツを効率的かつスピーディーに配信できるように工夫されたネットワークのことのようです。
これによってオリジンサーバーの負担を減らせるみたい。
感覚的には、アマゾンの倉庫をいろいろな場所に設けて、（東京の人は東京の倉庫から出荷！、大阪の人は大阪の倉庫から出荷！みたいな感じで）負担を減らそう！ってことで理解してます。
では、本題、、、
1:chart.jsをCDN経由でRailsアプリに導入
以下のリンクからCDNを作成！
https://www.jsdelivr.com/package/npm/chart.js?version=2.8.0
view > layouts > application.html.erbのheadタグにscriptを記述
application.thml.erb
<!DOCTYPE html>
<html>
<head>
<title>Nutrik</title>
<%= csrf_meta_tags %>
<%= csp_meta_tag %>
<script type="text/javascript" src="https://js.pay.jp/v1/"></script>
<%= stylesheet_link_tag 'application', media: 'all'%>
<%= javascript_pack_tag 'application' %>
<script src=”ここに貼り付ける！！！”></script>
</head>
<body>
<%= yield %>
</body>
</html>
2:グラフ生成のコード記述
index.html.erb
<div class="chart">
<canvas id="myChart" ></canvas>
<script>
var ctx = document.getElementById("myChart");
var myChart = new Chart(ctx, {
type: 'radar',
data: {
labels: ["1群", "２群", "３群", "４群", "5群", "6群"],
datasets:
[
{
label: '６つの基礎食品群',
backgroundColor: 'rgba(255,165,0,0.5)',
borderColor: 'rgba(255,165,0,0.2)',
data: [1,2,3,4,5,6]
},
]
},
options: {
maintainAspectRatio: false,
scale: {
ticks: {
suggestedMin: 0,
suggestedMax: 7
}
}
}
});
</script>
</div>
そしたらこんな感じのグラブができます！
3:すこーしコード書き換えて投稿と連動させる
こんな感じでコードを少し書き換えてあげる。
index.html.erb
data: [1,2,3,4,5,6]
index.html.erb
data: [<%= @food_group[1] %>, <%= @food_group[2] %>, <%= @food_group[3] %>, <%= @food_group[4] %>, <%= @food_group[5]%>, <%= @food_group[6] %>]
私の場合、持ってきたいデータが特殊だったので、少しコントローラーで加工して、インスタンス変数でビューに渡しています。
終わりに
結果、すごく簡単にグラフが作れる！！
参考記事