morris.js Graph wird nicht gerendert

Ich kann nicht scheinen morris.js Graph in Schienen arbeiten, mit coffeescript. Es scheint nicht einmal, auf der Seite zu rendern. Ich habe es geschafft, das Tutorial-Graph-Rendering zu bekommen, was mich glauben lässt, dass es ein Problem mit meinem Controller ist (und dass meine Edelstein-Dateien usw. korrekt geladen sind), aber ich bin total verloren. Meine Konsolenausgabe unter: morris.js Graph wird nicht gerendert

Coffee

jQuery -> 
     $.get '/scores/index.json', (data) -> 
     Morris.Line 
      element: $('#myfirstchart') 
      data: data 
      xkey: 'created_at' 
      ykeys: ['scores'] 
      labels: ['Score']

index.html.erb

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/morris.js/0.5.1/morris.css"> 
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script> 
<script src="//cdnjs.cloudflare.com/ajax/libs/raphael/2.1.0/raphael-min.js"></script> 
<script src="//cdnjs.cloudflare.com/ajax/libs/morris.js/0.5.1/morris.min.js"></script> 

<div id="myfirstchart" style="border:2px solid red; height: 200px; width: 100%"></div>

scores_controller.rb

def index 
    respond_to do |format| 
     format.html { 
     # Display current users scores in the order of created at descending from most recent. Taking the last 5 scores 
     @scores = Score.all 
     } 
     format.json { 
     scores = Score.all 
     render :json => scores 
     } 
    end 

    end

Jede mögliche Hilfe würde sehr groß geschätzt.

Quelle

2017-12-12 user2026178

Laut der Dokumentation sollte das <script>-Tag innerhalb der <head> Abschnitt sein. In Ihrem application.html.erb:

<!DOCTYPE html> 
<html> 
<head> 
    <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/morris.js/0.5.1/morris.css"> 
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script> 
    <script src="//cdnjs.cloudflare.com/ajax/libs/raphael/2.1.0/raphael-min.js"></script> 
    <script src="//cdnjs.cloudflare.com/ajax/libs/morris.js/0.5.1/morris.min.js"></script> 
    <!-- other Rails imports --> 
</head> 

<body> 
    <%= yield %> 
</body> 
</html>

Siehe jQuery Get Started für ein Beispiel.

Quelle

2017-12-12 02:51:54 s3tjan

Verrückt genug, aber ich habe schon getan ... Keine Freude – user2026178

Erhalten Sie den gleichen Fehler? – s3tjan

Ich hatte dieses Problem. Die Lösung bestand darin, die gewünschten Datensätze in einen Helfer einzufügen und dann im JS aufzurufen, um in der Ansicht zu rendern. Holen Sie sich Ihren Helfer, um die Daten so zu zeigen, wie es Morris erfordert, dann werden Sie gut sein.

Innerhalb eines Helfers:

def chart_data 
     (1.month.ago.to_date..Date.today).map do |date| 
     { 
      period: date, 
      score: Score.where("date(created_at) = ?", date).count, 
     } 
     end 
    end

Ihrer Ansicht:

<%= content_tag :div, "", style: "height: 205px", id: "scores-morris", data: {scores: chart_data} %>

Und schließlich Ihre js/Kaffee-Skript hinzuzufügen. Dies ist Kaffee:

$ -> 
    Morris.Line 
    element: 'scores-morris' 
    data: $('#scores-morris').data('scores') 
    xkey: 'period' 
    ykeys: [ 'score' ] 
    labels: [ 'SCORE!!!' ] 
    hideHover: [ 'auto' ]

Quelle

2017-12-12 03:16:18

morris.js Graph wird nicht gerendert

Antwort

Verwandte Themen