[Ruby on Rails] Implementieren Sie ein Kreisdiagramm, das den Prozentsatz der Farben angibt

Ich persönlich erstelle so etwas wie eine "Schrank-App", mit der ich meine eigenen Klamotten verwalten kann. Ich denke, dass ich es will und dass es interessant wäre, es zu machen. Daher dachte ich, es wäre großartig, wenn ich das Farbverhältnis meiner Kleidung in einem leicht verständlichen Kreisdiagramm anzeigen könnte, also habe ich es dieses Mal implementiert.

Entwicklungsumgebung

Ruby 2.5.1p57 Rails 5.2.4.4 Verwenden Sie Edelstein ・ Active_hash ・ Chartkick ・ Diagrammfähig

Ich werde es tatsächlich schaffen

Ich war sehr besorgt darüber, wo ich die tatsächlichen Farbdaten dieses Mal haben sollte, aber ich entschied mich, active_hash zu verwenden, das Modell die Daten im Hash-Format haben zu lassen und die ID in einer Datenbank namens "Farben" zu speichern.

Schreiben Sie zunächst Folgendes in die Gemfile.

Gemfile

#~Kürzung~
gem 'active_hash'
gem "chartkick"
gem 'chartable'
#~Kürzung~

Beschreiben Sie Folgendes in application.js.

application.js

//= require Chart.bundle
//= require chartkick

Und hier ist ein Modell mit tatsächlichen Farbdaten unter Verwendung von Active_hash.

color_data.rb

class ColorData < ActiveHash::Base
  self.data = [
    { id: 1, name: 'Weiß', backcolor: "#fff" },
    { id: 2, name: 'schwarz', backcolor: "#000" },
    { id: 3, name: 'grau', backcolor: "#808080" },
    { id: 4, name: 'Braun', backcolor: "#660000" },
    { id: 5, name: 'Beige', backcolor: "#FFE4C4" },
    { id: 6, name: 'Grün', backcolor: "#006400" },
    { id: 7, name: 'Blau', backcolor: "#0000CD" },
    { id: 8, name: 'lila', backcolor: "#8B008B" },
    { id: 9, name: 'Gelb', backcolor: "#FFFF00" },
    { id: 10, name: 'Rosa', backcolor: "#FF82B2" },
    { id: 11, name: 'rot', backcolor: "#FF0000" },
    { id: 12, name: 'Silber', backcolor: "#C0C0C0" },
    { id: 13, name: 'Gold', backcolor: "#DAA520" }
  ]
end

Ich habe es so geschrieben. Der Schlüssel "Hintergrundfarbe" sind die Daten zum Übergeben der angegebenen Farbe an jedes Element des Kreisdiagramms.

Und Modell. Ich wollte die Grafikdaten im Hash-Format und die Hintergrundfarbdaten als Array an den Controller übergeben, was sehr hilfreich ist und ein redundanter Code ist, der dasselbe wiederholt. Ich suche hier einen besseren Weg.

color.rb

class Color < ApplicationRecord
  extend ActiveHash::Associations::ActiveRecordExtensions
  belongs_to_active_hash :color_data
  class << self
    #Methode zum Bilden von Hash-Daten, die an das Diagramm übergeben werden sollen
    def color_data_acquisition_for_graphs
      colors = all
      color_graph_data = {}
      colors.each_with_index do |color, index|
        color_graph_data = { color.color_data.name => 1 } if index.zero?
        #Drehen Sie die von der DB erhaltenen Daten mit jedem und prüfen Sie, ob sie bereits als Schlüssel vorhanden sind
        #Wenn es bereits vorhanden ist, addieren Sie 1 zu dem Wert, der der Standard des Verhältnisses ist.
        if color_graph_data.key?(color.color_data.name)
          color_graph_data[color.color_data.name] += 1
        else
          color_graph_data[color.color_data.name] = 1
        end
      end
      color_graph_data
    end

    def background_color_data_acquisition_for_graphs
      colors = all
      color_graph_data = {}
      background_colors = []
      colors.each_with_index do |color, index|
        if index.zero?
          color_graph_data = { color.color_data.name => 1 }
          #Hintergrundfarbdaten hinzufügen (Hintergrundfarbdaten)
          background_colors << color.color_data.backcolor
        end
        if color_graph_data.key?(color.color_data.name)
          color_graph_data[color.color_data.name] += 1
        else
          color_graph_data[color.color_data.name] = 1
          #Die Reihenfolge wird beibehalten, um Hintergrundfarben hinzuzufügen, wenn ein Schlüssel kommt, der noch nicht importiert wurde
          background_colors << color.color_data.backcolor
        end
      end
      background_colors
    end
  end
end

Bitte beziehen Sie sich hier nicht darauf lol (Jemand, wenn es eine gute Möglichkeit gibt zu schreiben ...)

Übergeben Sie dann die hier erstellten Daten an die Steuerung.

closet_controller.rb

class ClosetController < ApplicationController
  def index
    @color_graph_data = Color.color_data_acquisition_for_graphs
    @background_colors = Color.background_color_data_acquisition_for_graphs
  end
end

Übergeben Sie dann die aggregierten Daten für das Diagramm und die Daten zum Färben des Diagramms an die Ansicht.

Alles was Sie tun müssen, ist es anzuzeigen.

ruby:index.html.slim

= pie_chart @color_graph_data, colors: @background_colors

Allein damit ...

Es kann so angezeigt werden.

Übrigens, wenn Sie die Menüelemente nicht benötigen, können Sie sie ausblenden, indem Sie eine Datei mit dem Namen "chartkick.rb" unter config / initializers / und Schreiboptionen erstellen.

chartkick.rb

Chartkick.options = {
  legend: false
}

Auf diese Weise ,,,

Zuerst dachte ich, ich müsste die für den Hintergrund angegebene Farbe abhängig von der Farbe bedingt verzweigen, aber zum Zeitpunkt von Active_hash kam mir zunächst die Idee, jeden Hintergrundfarbwert zu haben. Es war gut.

Es wird eine Entwicklung mit 28 Tabellen sein, was die größte Zahl in der Geschichte für persönliche Apps darstellt, also werde ich mein Bestes geben und dabei Spaß haben.