2013-08-29 2 views
0

Я пытаюсь создать образец гистограммы для данных JSON, создаваемых через Rails.Рафаэль не определен с использованием g.raphael-rails и raphael-rails gem

Чтобы начать, я просто пытаюсь просто увидеть, может ли мое приложение Rails создать файл barchart.html из example, предоставленный в g.raphael github repo.

Я использую raphael-rails и g.raphael-rails gem in my Rails 3.2.11 Приложение.

В настоящее время, когда я пытаюсь ударить/компанию/company_division_stats в браузере от моего sample code, Firebug бросает ошибку ниже: -

ReferenceError: Raphael is not defined in corresponding to the line of code :- 
var r = Raphael("holder") 

документация из двух драгоценных камней не определяет необходимость включения любого js-файлы к моему application.js.

Интересно,

Когда я просто пытаюсь сделать прогон образца простой HTML ниже в браузере, я также получаю две ошибки.

1.

ReferenceError: Raphael is not defined 
F.prototype = Raphael.g; 

Reference g.bar.js(line 419)  

2. TypeError: r.barchart is not a function

Образец HTML: -

<!--<!doctype html>--> 
<html lang="en"> 
<head> 
    <meta charset="utf-8"> 
    <title>g·Raphaël Static Bar Charts</title> 
    <link rel="stylesheet" href="css/demo.css" type="text/css" media="screen" charset="utf-8"> 
    <link rel="stylesheet" href="css/demo-print.css" type="text/css" media="print" charset="utf-8"> 
    <!-- Throws same error when using the raphael and g.raphael gem--> 
    <script src="https://raw.github.com/DmitryBaranovskiy/g.raphael/master/g.bar.js" type="text/javascript" charset="utf-8"></script> 
    <script src="https://raw.github.com/DmitryBaranovskiy/g.raphael/master/raphael-min.js" type="text/javascript" charset="utf-8"></script> 
    <script src="https://raw.github.com/DmitryBaranovskiy/g.raphael/master/g.raphael.js" type="text/javascript" charset="utf-8"></script> 
    <script type="text/javascript" charset="utf-8"> 
     window.onload = function() { 
      var r = Raphael("holder"), 
        data1 = [[55, 20, 13, 32, 5, 1, 2, 10], [10, 2, 1, 5, 32, 13, 20, 55], [12, 20, 30]], 
        data2 = [[55, 20, 13, 32, 5, 1, 2, 10], [10, 2, 1, 5, 32, 13, 20, 55], [12, 20, 30]], 
        data3 = [[55, 20, 13, 32, 5, 1, 2, 10], [10, 2, 1, 5, 32, 13, 20, 55], [12, 20, 30]], 
        txtattr = { font: "12px 'Fontin Sans', Fontin-Sans, sans-serif" }; 

      r.text(160, 10, "Single Series Chart").attr(txtattr); 
//   r.text(480, 10, "Multiline Series Chart").attr(txtattr); 
//   r.text(160, 250, "Multiple Series Stacked Chart").attr(txtattr); 
//   r.text(480, 250, 'Multiline Series Stacked Vertical Chart. Type "round"').attr(txtattr); 

      r.barchart(10, 10, 300, 220, [[55, 20, 13, 32, 5, 1, 2, 10]], 0, {type: "soft"}); 
//   r.barchart(330, 10, 300, 220, data1); 
//   r.barchart(10, 250, 300, 220, data2, {stacked: true}); 
//   r.barchart(330, 250, 300, 220, data3, {stacked: true, type: "round"}); 
     }; 
    </script> 
</head> 
<body class="raphael" id="g.raphael.dmitry.baranovskiy.com"> 
<div id="holder"></div> 
<p> 
    Demo of <a href="http://g.raphaeljs.com/">g·Raphaël</a> JavaScript library. 
</p> 
</body> 
</html> 

Я действительно не уверен, что я делаю неправильно с моей стороны. Любые входы на то, что я мог бы пропустить?

Спасибо.

ответ

1

Уточнено, благодаря вводам моего старшего. В настоящее время я просто добавляю их как JS в app/assets/javascripts и требую их в своем приложении.js

Мне нужно определить js в правильном порядке .

-> Заказ в образце HTML код

<script src="https://raw.github.com/DmitryBaranovskiy/g.raphael/master/raphael-min.js" type="text/javascript" charset="utf-8"></script> 
    <script src="https://raw.github.com/DmitryBaranovskiy/g.raphael/master/g.raphael.js" type="text/javascript" charset="utf-8"></script> 
    <script src="https://raw.github.com/DmitryBaranovskiy/g.raphael/master/g.bar.js" type="text/javascript" charset="utf-8"></script> 
  • Заказ в application.js

    require raphael-min 
    
    require g.raphael 
    
    require g.bar 
    
0

Для одного с использованием Rails 4 и graphael-rails перл:

Добавить в application.js до require_tree заявления:

... 
//= require raphael/raphael.js 
//= require g.raphael/g.raphael.js 
//= require g.raphael/g.bar.js // ...and g.pie.js etc 
//= require_tree . 

Этот камень помогает внутренне связывая Рафаэль и g.Rafaël сделки РЕПО, помогая держать их в курсе.

Смежные вопросы