Je commence juste à apprendre la programmation, donc c'est peut-être un mauvais article, mais j'aimerais écrire un tel article comme un mémorandum et une pratique pour moi-même. J'ai hâte de travailler avec vous.
En termes simples, c'est un joyau qui affiche un graphique. Cela ressemble à une gemme qui permet d'utiliser une bibliothèque de graphes JavaScript appelée HighCharts en Ruby. Je vais l'écrire tôt, mais je ne sais pas comment changer la méthode d'affichage du graphique lui-même, donc cette fois je n'écrirai que l'implémentation.
gem 'lazy_high_charts'
Tout d'abord, écrivez ceci dans le Gemfile et l'installation du bundle
En plus de cela dans application.js
//= require highcharts/highcharts
//= require highcharts/highcharts-more
//= require highcharts/highstock
Ajoutons. Vous êtes maintenant prêt.
La première est la description du côté Vue.
<%= high_chart('my-first-chart', @chart) %>
Le graphique sera dessiné là où vous avez fait cette description.
Ici, je décide du type de graphe (histogramme, graphe circulaire, graphe linéaire, etc.), mais comme je l'ai mentionné plus tôt, je ne connais pas encore les détails, donc j'écrirai la description que j'ai mise en œuvre pour le moment.
def create
@post = Post.new(post_params)
if @post.save
-----------------------------------------------------#Description de l'affichage du graphique
@chart = LazyHighCharts::HighChart.new('graph') do |f|
f.title(text: @post.select.name)
f.xAxis(categories: ["Soldier", "Wizard", "Monk", "Fighter", "Gunner"])
f.series(name: "", yAxis: 1, data: [@post.vs_soldier_id,@post.vs_wizard_id,@post.vs_monk_id,@post.vs_fighter_id,@post.vs_gunner_id])
f.yAxis [
{title: {text: "", margin: 0} },
{title: {text: ""}, opposite: true},
]
f.legend(align: 'none')
f.chart({defaultSeriesType: "column"})
end
-------------------------------------------------------------------------
else
render "new"
end
end
Il s'agit d'une description lorsque la valeur acquise par le paramètre fort de la nouvelle action est affichée par l'action de création.
Cette fois, un graphique à barres s'affiche. f.yAxis f.legend f.series Je ne suis pas sûr de ces trois car je n'en avais pas besoin dans cette implémentation (désolé)
f.title Telle qu'elle est écrite, la valeur que vous entrez ici sera le titre du graphique.
f.xAxis La valeur sur l'axe horizontal du graphique. Cette fois, c'était décidé ici, alors j'y ai mis une chaîne de caractères.
Et dans f.series data: [] Je vais mettre les données ici. (J'ai fait beaucoup de variables pour mettre des valeurs ici, mais c'était difficile pour les débutants ...)
f.chart({defaultSeriesType: "column"}) Il semble que la "colonne" ici soit le type de graphique.
c'est tout.
Il y a encore beaucoup de choses que je ne comprends pas, c'est donc un article compliqué, mais j'aimerais faire de mon mieux pour écrire de bonnes choses petit à petit. Puis ~
Recommended Posts