[Ruby on Rails] Créez un graphique circulaire des totaux par colonne avec Chartkick

introduction

J'ai utilisé Chart Kick parce que je voulais insérer un graphique avec des rails. Comme l'introduction elle-même est facile, nous décrirons comment créer un graphique circulaire des résultats agrégés.

Page référencée

• Document officiel Chartkick
• Si vous souhaitez gérer des graphiques simples dans Rails, utilisez chartkick plutôt que chart-js-rails
• Implémenter un graphique circulaire à une vitesse explosive [5 minutes]

environnement

ruby 2.5.1 Rails 5.2.4.3

Hypothèses et objectifs

Créez un graphique circulaire à partir de la ** colonne d'opinion (entier) ** du ** tableau des votes ** qui résume les opinions de l'utilisateur. Si la valeur de la colonne d'opinion est 1, c'est pour, et si elle est 0, c'est le contraire, mais elle est créée avec d'autres valeurs et valeurs NULL mélangées.

** table des votes **

** Dessin d'achèvement **

• Sur la machine réelle, le nombre d'éléments est affiché en plaçant le curseur de la souris sur chaque élément du graphique circulaire.

Introduction de Chart kick

Bien qu'il soit décrit sur la page de référence, il sera à nouveau décrit.

Gemfile

gem "chartkick"   #Ajouter

Gemfile

$ bundle install

app/javascript/packs/application.js

//= require chartkick
//= require Chart.bundle  #Ajouter deux lignes

Réflexion sur la page d'affichage

La page à afficher peut être n'importe où, mais cette fois, je voudrais afficher le graphique dans index.html.erb du contrôleur de messages.

html.erb:app/views/posts/index.html.erb

<%= pie_chart Vote.group(:opinion).count%>

C'est un graphique que vous ne comprenez pas vraiment ce qu'il représente. ..

Par conséquent, définissez des variables et des méthodes pour les graphiques dans le fichier du contrôleur.

app/controllers/posts_controller.rb

  def index
    @opinion = Vote.pluck(:opinion)
    @aggregate = aggregateOpinion(@opinion)
    @sum = sumOpinion(@opinion)
  end

  def aggregateOpinion(array)
    result = [["Se mettre d'accord",0],["Opposition",0],["Ni",0],["Pas de réponse",0]]
    array.each do |i|
      if i == 1
        result[0][1] += 1
      elsif i == 0
        result[1][1] += 1
      elsif i == nil
        result[3][1] += 1
      else 
        result[2][1] += 1
      end
    end
    return result
  end

  def sumOpinion(array)
    result = [["Nombre total de votes",0],["Nombre de votes valides",0],["Nombre de votes invalides",0]]
    array.each do |i|
      if i == nil
        result[2][1] += 1
      else 
        result[1][1] += 1
      end
    end
    result[0][1] = array.length 
    return result
  end

Commentaire

Seule la colonne cible est acquise sous forme de tableau avec la méthode pluck. Après cela, il est formaté en données pour un graphique circulaire par la méthode aggregateOpinion.

Comme l'index du tableau de résultats est dans l'ordre d'affichage du graphe circulaire tel qu'il est, le paramètre est La valeur NULL vient en dernier, suivie du soi-disant "autre" (dans ce cas, le nom [ni]).

La méthode sumOpinion n'est pas directement liée au graphique, mais il est difficile de mettre les informations sur le nombre total de votes sur le graphique, il est donc créé séparément.

Sur la base du contenu ci-dessus, je voudrais le refléter à nouveau sur la page d'affichage.

html.erb:app/views/posts/index.html.erb

<%= pie_chart @aggregate, width: "500px"%>

Ce n'est pas un problème, mais à la fin, la mise en page et le contenu acquis par la méthode sumOpinion sont affichés dans l'élément de table, et c'est terminé.

html.erb:app/views/posts/index.html.erb

<%= pie_chart @aggregate,colors: ["#3333cc","#cc3333","#339966","333"], donut: true , width: "500px"%>
<table border="1" width="500">
  <tr>
    <th>Nombre total de votes</th>
    <th>Nombre de votes valides</th>
    <th>Nombre de votes invalides</th>
  </tr>
    <tr>
    <th><%=@sum[0][1]%></th>
    <th><%=@sum[1][1]%></th>
    <th><%=@sum[2][1]%></th>
  </tr>
</table> 

À la fin

Qu'as-tu pensé. Je pense que j'ai pu l'appliquer un peu plus à la partie méthode. .. Bien sûr, chartkick ne prend pas uniquement en charge les graphiques circulaires, veuillez donc le vérifier. Merci d'avoir regardé!