So zeigen Sie Diagramme in Ruby on Rails an (LazyHighChart)

Ich fange gerade erst an, Programmieren zu lernen, daher ist es vielleicht ein schlechter Artikel, aber ich möchte einen solchen Artikel als Memorandum schreiben und für mich selbst üben. Ich freue mich darauf, mit Dir zu arbeiten.

Was ist Lazy High Chart?

Einfach ausgedrückt ist es ein Juwel, das eine Grafik anzeigt. Es sieht aus wie ein Juwel, das es ermöglicht, eine JavaScript-Diagrammbibliothek namens HighCharts in Ruby zu verwenden. Ich werde es früh schreiben, bin mir aber noch nicht sicher, wie ich die Anzeigemethode des Diagramms selbst ändern soll. Deshalb werde ich dieses Mal nur die Implementierung schreiben.

Wir stellen vor: Gem

gem 'lazy_high_charts'

Schreiben Sie dies zunächst in die Gemfile- und Bundle-Installation

Darüber hinaus in application.js

//= require highcharts/highcharts
//= require highcharts/highcharts-more
//= require highcharts/highstock

Fügen wir hinzu. Jetzt bist du bereit.

Diagramm in Ansicht anzeigen

Zuerst ist die Beschreibung auf der Ansichtsseite.

<%= high_chart('my-first-chart', @chart) %>

Das Diagramm wird dort gezeichnet, wo Sie diese Beschreibung vorgenommen haben.

Controller-seitige Einstellungen

Hier entscheide ich mich für die Art des Diagramms (Balkendiagramm, Kreisdiagramm, Liniendiagramm usw.), aber wie ich bereits erwähnt habe, kenne ich die Details noch nicht, daher werde ich die Beschreibung schreiben, die ich vorerst implementiert habe.

  def create
    @post = Post.new(post_params)

    if @post.save
-----------------------------------------------------#Beschreibung zur Anzeige des Diagramms
    @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

Dies ist eine Beschreibung, wenn der Wert, den der Parameter strong aus der neuen Aktion erfasst, von der Aktion create angezeigt wird.

Dieses Mal wird ein Balkendiagramm angezeigt. f.yAxis f.legend f.series Ich bin mir bei diesen drei nicht sicher, weil ich sie in dieser Implementierung nicht brauchte (sorry)

f.title Wie geschrieben, ist der Wert, den Sie hier eingeben, der Titel des Diagramms.

f.xAxis Der Wert auf der horizontalen Achse des Diagramms. Diesmal wurde hier entschieden, also habe ich eine Zeichenkette eingefügt.

Und in f.series data: [] Ich werde die Daten hier setzen. (Ich habe viele Variablen verwendet, um hier Werte zu setzen, aber für Anfänger war es schwierig ...)

f.chart({defaultSeriesType: "column"}) Es scheint, dass die "Spalte" hier die Art des Graphen ist.

das ist alles.

Es gibt immer noch viele Dinge, die ich nicht verstehe und die zu einem chaotischen Artikel geworden sind, aber ich würde gerne mein Bestes geben, um nach und nach gute Dinge zu schreiben. Dann ~