[RUBY] [Mémo de travail de l'application personnelle] Comment afficher un graphique à barres et un graphique linéaire dans un graphique

Ce que j'ai fait cette fois

Nous avons déjà créé un graphique à barres avec la date sur l'axe des x et les calories sur l'axe des Y, et nous ajouterons un graphique linéaire du poids sur l'axe des Y.

Préparation avant l'implémentation du graphe

Ajout du formulaire de saisie du poids

python

.weight
poids
  = f.number_field :weight, step: '0.1', placeholder: 'Exemple) 70'
  kg

Colonne ajoutée pour stocker le poids

https://qiita.com/azusanakano/items/a2847e4e582b9a627e3a#%E3%82%AB%E3%83%A9%E3%83%A0%E8%BF%BD%E5%8A%A0 Vous pouvez le faire immédiatement en vous référant à cet article.

Ajout d'une colonne de poids aux paramètres forts

posts_controller.rb

private
  def post_params
    params.require(:post).permit(:food, :calorie, :protein, :fat, :carbo, :text, :image, :weight).merge(user_id: current_user.id)
  end

Afficher le poids

ruby:_post.html.haml

.weight
- if post.weight.present?
  = post.weight
  kg

Page réelle (voici à quoi elle ressemble lorsqu'elle est affichée)

Enfin, ajoutez du poids au graphique !!

Maintenant, comment mettez-vous ce poids supplémentaire sur le graphique à partir d'ici?

Le graphique actuel ressemble à ceci.

À l'heure actuelle, seul le poids est horizontal et les calories sont verticales. Je voudrais ajouter un graphique linéaire du poids à la verticale ici afin que je puisse voir la corrélation entre les calories et le poids.

↓ Un article de référence a été trouvé assez rapidement, et il a été étonnamment terminé en une heure.

Cliquez ici pour le code complété

app/controllers/charts_controller.rb

class ChartsController < ApplicationController

  def index
    #calorie
    #Calculer le total des calories par date
    sum_calorie = current_user.posts.group("date(created_at)").sum(:calorie)
    #Étant donné que le total des calories pour chaque date est sous la forme d'un hachage, obtenez la valeur, placez-la dans un tableau et affectez-la à une variable
    array_calorie = sum_calorie.values

    #Passer des données au côté js en utilisant gon
    gon.data = []
    #Extraire les calories totales pour chaque date une par une avec la méthode de la carte
    #Comment utiliser la méthode de la carte → Variable Array.map {|Nom de variable|Traitement spécifique}
    gon.data = array_calorie.map{ |calorie| calorie}

    #Créé par date_Obtenez uniquement à la colonne. Stocké sous la forme d'un tableau
    dates_calorie = current_user.posts.group("date(created_at)").select(:created_at)

    gon.date = []
    @dates = dates_calorie.map{ |dates| dates.created_at}
    #Retirez et modifiez la notation de la date une par une dans chaque instruction
    @dates.each do |a|
      gon.date << a.strftime("%Y année%m mois%jour j")
    end


    #Poids ☆ Cette pièce a été ajoutée cette fois ☆
    gon.weight = current_user.posts.group("date(created_at)").select(:weight).map{ |weight| weight[:weight]}
  end
end

ruby:app/view/charts/index.html.erb

<%#Dessinez un graphique à l'intérieur de la balise canvas%>
<div class="chart-container" style="position: relative; height:50vh; width:50vw">
    <canvas id="myChart"width="400" height="400"></canvas>
</div>

<%#Ecrire js dans la balise script de html%>
<script>
#Récupère le DOM de la partie graphique et dessine le graphique avec la méthode getContext
var ctx = document.getElementById("myChart").getContext('2d');

var myChart = new Chart(ctx, {
    
    type: 'bar',
    data: {
        #Spécifiez l'axe X avec des étiquettes
        labels: gon.date,
        datasets: [{
            type: 'bar', #Les calories sont un graphique à barres
            label: "Calories quotidiennes totales",
            #Spécifiez l'axe Y avec des données
            data: gon.data,
            backgroundColor: 'rgba(75, 192, 192, 0.2)',
            borderColor: 'rgba(75, 192, 192, 1)',
            borderWidth: 1,
            fill: false
        },
    #Cette fois j'ai ajouté cette partie----------------------------
        {
            type: 'line', #Le poids est un graphique en ligne brisée
            label: "poids",
            #Spécifiez l'axe Y avec des données
            data: gon.weight,
            backgroundColor: 'rgba(255, 99, 132, 0.2)',
            borderColor: 'rgb(255, 99, 132)',
            borderWidth: 1.2,
            #Si vous n'écrivez pas ceci, la partie inférieure de la barre sera peinte
            fill: false,
        }]
    #------------------------------------------------------
    },
    options: {
        title:  {
            display: true,
            text: "Graphique des calories"
        },
        scales: {
            yAxes: [{
                ticks: {
                    beginAtZero:true
                },
                id: 'axe y gauche'
            }]
        }
    }
});

</script>

<div class="home">
    <%= link_to 'Retourner à la maison', root_path %>
</div>

Cliquez ici pour le graphique complété

Articles référencés et processus jusqu'à la fin

http://www.dcom-web.co.jp/lab/javascript/draw_multi_axis_graph_using_chartjs Cette page était la première référence.

1. Au lieu de le passer soudainement avec gon, j'ai d'abord essayé de voir s'il était affiché avec un numéro approprié tel que [60, 70], en référence à l'article ci-dessus.
2. Après avoir confirmé que cela fonctionnait et que le graphique était affiché en toute sécurité, je me suis demandé comment transférer le poids du contrôleur vers la vue.
3. Je pensais qu'il serait difficile d'obtenir un poids par jour, mais j'ai trouvé que la méthode de groupe de Rails les regrouperait dans celui avec l'identifiant le plus bas pour chaque groupe. Si vous utilisez la méthode de groupe pour chaque date, vous pouvez obtenir le poids avec le plus petit identifiant parmi les publications publiées ce jour-là. https://pikawaka.com/rails/group#group%E3%83%A1%E3%82%BD%E3%83%83%E3%83%89%E3%81%AE%E5%9F%BA% E6% 9C% AC% E7% 9A% 84% E3% 81% AA% E4% BD% BF% E3% 81% 84% E6% 96% B9
4. Après cela, remplacez-le par gon et passez-le de gon à gon.
5. Enfin, ajoutez fill: false pour créer une ligne et terminer.