그래프 표시 넣은 gem은 Chartkick입니다만, 그래프 그리기는 chart.js로 쓰고 있습니다.

처음에

이번에는 이런 느낌으로 막대 그래프와 절절 그래프를 구현했습니다.



이전에 다음 기사에서 선 그래프를 작성했으며,
방법은 거의 함께입니다.
이 기사에서는 그래프 코드의 해설뿐이므로,
gem의 도입, 투고수의 취득 방법에 대해서는 이하의 기사를 확인해 주세요.
유저가 받은 좋아하는 수의 취득 방법에 대해서는 추후 기사를 작성할 예정입니다.

자바 스크립트 설명

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},{
　　　　　　　　#ここから重ねる２個目のグラフ
                    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의 숫자를 꼬리면 더 흐리게 할 수 있습니다.
이하의 사이트를 참고로 예쁜 그래프를 만들 수 있을까 생각합니다!