グラフ表示 入れたgemはChartkickですが、グラフ描画はchart.jsで書いています。
初めに
今回は、こんな感じで棒グラフと、折線グラフを実装しました。
以前、以下の記事で折線グラフは作成済みではあり、
やり方はほとんど一緒です。
この記事ではグラフのコードの解説のみなので、
gemの導入、投稿数の取得方法については以下の記事をご確認ください。
ユーザーがもらったいいね数の取得方法については追って記事を作成する予定です。
Javascriptの記述
turbolinksを無効にしなくてもグラフは表示できました。
一応、chart.jsでの基本の書き方は以下になります。
<canvas id="myChart_2" width="200" height="48"></canvas>
<!--グラフの記述-->
<script>
var ctx = document.getElementById("myChart_2").getContext('2d');
var myChart = new Chart(ctx, {
type: 'bar',
data: {
labels: ['6日前', '5日前', '4日前','3日前', '2日前', '1日前', '今日'],
datasets: [{
label: "投稿数",
data: [<%= @posts.created_6days_ago.count %>,<%= @posts.created_5days_ago.count %>,<%= @posts.created_4days_ago.count %>,<%= @posts.created_3days_ago.count %>, <%= @posts.created_2days_ago.count %>, <%= @posts.created_yesterday.count %>, <%= @posts.created_today.count %>],
backgroundColor: 'rgba(30, 144, 255, 0.5)',
borderColor: 'rgba(30, 144, 255, 0.5)',
fill: false},{
#ここから重ねる2個目のグラフ
label: "もらったいいね数",
data: [<%= @point.created_6days_ago.count %>,<%= @point.created_5days_ago.count %>,<%= @point.created_4days_ago.count %>,<%= @point.created_3days_ago.count %>, <%= @point.created_2days_ago.count %>, <%= @point.created_yesterday.count %>, <%= @point.created_today.count %>],
backgroundColor: "rgba(255,0,0,0.4)",
borderColor: 'rgba(255,0,0,0.4)',
type: 'line',
}]
},
});
</script>
borderColor: 'rgba(30, 144, 255, 0.5)',とありますが、
最後の0.5とかの数字をいじればもっとぼかしたりできます。
以下のサイトを参考に綺麗なグラフが作れるかと思います!
Author And Source
この問題について(グラフ表示 入れたgemはChartkickですが、グラフ描画はchart.jsで書いています。), 我々は、より多くの情報をここで見つけました https://qiita.com/ki_87/items/6a0f8f3ee01c538bb75e著者帰属:元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。
Content is automatically searched and collected through network algorithms . If there is a violation . Please contact us . We will adjust (correct author information ,or delete content ) as soon as possible .