[RUBY] [Arbeitsnotiz für persönliche Anwendungen] Anzeigen von Balkendiagrammen und Liniendiagrammen in einem Diagramm

Was ich diesmal gemacht habe

Wir haben bereits ein Balkendiagramm mit Datum auf der x-Achse und Kalorien auf der Y-Achse erstellt und werden der Y-Achse ein Liniendiagramm mit Gewicht hinzufügen.

Vorbereitung vor der Graphimplementierung

Gewichtseingabeformular hinzugefügt

python

.weight
Körpergewicht
  = f.number_field :weight, step: '0.1', placeholder: 'Beispiel) 70'
  kg

Spalte zum Speichern des Gewichts hinzugefügt

https://qiita.com/azusanakano/items/a2847e4e582b9a627e3a#%E3%82%AB%E3%83%A9%E3%83%A0%E8%BF%BD%E5%8A%A0 Sie können dies sofort tun, indem Sie auf diesen Artikel verweisen.

Gewichtsspalte zu starken Parametern hinzugefügt

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

Gewicht anzeigen

ruby:_post.html.haml

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

Aktuelle Seite (so sieht es aus, wenn es angezeigt wird)

Zum Schluss noch Gewicht in die Grafik einfügen !!

Wie setzen Sie dieses zusätzliche Gewicht von hier aus in die Grafik ein?

Das aktuelle Diagramm sieht folgendermaßen aus.

Gegenwärtig ist nur das Gewicht horizontal und die Kalorien vertikal. Ich möchte der Vertikalen hier ein Liniendiagramm des Gewichts hinzufügen, damit ich die Korrelation zwischen Kalorien und Gewicht sehen kann.

↓ Ein Referenzartikel wurde ziemlich schnell gefunden und war überraschenderweise in einer Stunde fertig.

Klicken Sie hier für den vollständigen Code

app/controllers/charts_controller.rb

class ChartsController < ApplicationController

  def index
    #Kalorie
    #Berechnen Sie die Gesamtkalorien nach Datum
    sum_calorie = current_user.posts.group("date(created_at)").sum(:calorie)
    #Da die Gesamtkalorien für jedes Datum in Form eines Hash vorliegen, rufen Sie den Wert ab, fügen Sie ihn in ein Array ein und weisen Sie ihn einer Variablen zu
    array_calorie = sum_calorie.values

    #Übergeben Sie Daten mit gon an js Seite
    gon.data = []
    #Extrahieren Sie die Gesamtkalorien für jedes Datum einzeln mit der Kartenmethode
    #Verwendung der Kartenmethode → Array-Variable.map {|Variablennamen|Spezifische Verarbeitung}
    gon.data = array_calorie.map{ |calorie| calorie}

    #Erstellt nach Datum_Holen Sie sich nur an der Spalte. In Form eines Arrays gespeichert
    dates_calorie = current_user.posts.group("date(created_at)").select(:created_at)

    gon.date = []
    @dates = dates_calorie.map{ |dates| dates.created_at}
    #Nehmen Sie die Datumsnotation in jeder Anweisung einzeln heraus und ändern Sie sie
    @dates.each do |a|
      gon.date << a.strftime("%Y Jahr%m Monat%d Tag")
    end


    #Gewicht ☆ Dieser Teil wurde dieses Mal hinzugefügt ☆
    gon.weight = current_user.posts.group("date(created_at)").select(:weight).map{ |weight| weight[:weight]}
  end
end

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

<%#Zeichnen Sie ein Diagramm innerhalb des Canvas-Tags%>
<div class="chart-container" style="position: relative; height:50vh; width:50vw">
    <canvas id="myChart"width="400" height="400"></canvas>
</div>

<%#Schreiben Sie js in das Skript-Tag von HTML%>
<script>
#Rufen Sie das DOM des Diagrammteils ab und zeichnen Sie das Diagramm mit der Methode getContext
var ctx = document.getElementById("myChart").getContext('2d');

var myChart = new Chart(ctx, {
    
    type: 'bar',
    data: {
        #Geben Sie die X-Achse mit Beschriftungen an
        labels: gon.date,
        datasets: [{
            type: 'bar', #Kalorien sind Balkendiagramme
            label: "Tägliche Gesamtkalorien",
            #Geben Sie die Y-Achse mit Daten an
            data: gon.data,
            backgroundColor: 'rgba(75, 192, 192, 0.2)',
            borderColor: 'rgba(75, 192, 192, 1)',
            borderWidth: 1,
            fill: false
        },
    #Diesmal habe ich diesen Teil hinzugefügt----------------------------
        {
            type: 'line', #Das Gewicht ist ein Diagramm mit gestrichelten Linien
            label: "Körpergewicht",
            #Geben Sie die Y-Achse mit Daten an
            data: gon.weight,
            backgroundColor: 'rgba(255, 99, 132, 0.2)',
            borderColor: 'rgb(255, 99, 132)',
            borderWidth: 1.2,
            #Wenn Sie dies nicht schreiben, wird der untere Teil der Leiste gemalt
            fill: false,
        }]
    #------------------------------------------------------
    },
    options: {
        title:  {
            display: true,
            text: "Kaloriengraph"
        },
        scales: {
            yAxes: [{
                ticks: {
                    beginAtZero:true
                },
                id: 'y linke Achse'
            }]
        }
    }
});

</script>

<div class="home">
    <%= link_to 'Nach Hause zurückkehren', root_path %>
</div>

Klicken Sie hier für das fertige Diagramm

Referenzierte Artikel und Prozess bis zur Fertigstellung

http://www.dcom-web.co.jp/lab/javascript/draw_multi_axis_graph_using_chartjs Diese Seite war die erste Referenz.

1. Anstatt es plötzlich mit gon zu übergeben, habe ich zuerst versucht zu prüfen, ob es mit einer geeigneten Nummer wie [60, 70] angezeigt wurde, wobei auf den obigen Artikel verwiesen wurde.
2. Nachdem ich bestätigt hatte, dass es funktioniert und das Diagramm sicher angezeigt wurde, fragte ich mich, wie ich das Gewicht vom Controller auf die Ansicht übertragen sollte.
3. Ich dachte, es wäre schwierig, ein Gewicht an einem Tag zu bekommen, aber ich fand, dass die Gruppenmethode von Rails sie in das mit der niedrigsten ID für jede Gruppe gruppieren würde. Wenn Sie die Gruppenmethode für jedes Datum verwenden, können Sie das Gewicht mit der kleinsten ID unter den an diesem Tag veröffentlichten Posts ermitteln. 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. Ersetzen Sie danach Gon durch Gon und geben Sie es von Gon zu Gon weiter.
5. Fügen Sie abschließend "fill: false" hinzu, um eine Linie zu erstellen und zu beenden.