morris.js 그래프가 렌더링되지 않습니다

coffeescript를 사용하여 morris.js 그래프를 레일에서 작업하는 것처럼 보이지 않습니다. 그것은 심지어 페이지에 렌더링 된 것처럼 보이지 않습니다. 나는 튜토리얼 그래프 렌더링을 할 수 있었는데, 그것은 내 컨트롤러 (그리고 내 보석 파일 등이 올바르게로드되었다는 것)와 관련이 있다고 믿게한다. 그러나 나는 완전히 잃어버린 다. 내 콘솔 출력은 다음과 같습니다 : morris.js 그래프가 렌더링되지 않습니다

커피 스크립트

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

index.html.erb 어떤 도움 대단히 감사하겠습니다

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

<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.

출처

2017-12-12 user2026178

문서에 따르면 <script> 태그는 <head> 섹션 안에 있어야합니다. 당신의 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>

는 예를 들어 jQuery Get Started를 참조하십시오.

출처

2017-12-12 02:51:54 s3tjan

크레이지로 충분하지만 이미 완료했습니다 ... 기쁨 없음 – user2026178

동일한 오류가 발생합니까? – s3tjan

이 문제가있었습니다. 문제는 필자가 원하는 레코드를 도우미에 넣고 JS에서 호출하여 뷰에서 렌더링하는 것이 었습니다. Morris가 요구하는 방식으로 데이터를 표시하도록 도우미를 유도하십시오. 도우미의 내부

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

보기에서 :

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

그리고 마지막으로는 JS/커피 스크립트를 추가합니다. 커피입니다 :

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

출처

2017-12-12 03:16:18

morris.js 그래프가 렌더링되지 않습니다

답변

관련 문제