Graphiques sur les rails 3 utilisant les graphiques

Je suis chapter 223 (charts) of the railscasts et essayait d'implémenter le style "donut" pour une application en utilisant le Highcharts library. Je sais maintenant qu'ils ne sont qu'une série de "tarte" à l'intérieur d'une autre et chacun d'entre eux avec sa propre source de données. Bien que, en essayant d'ajuster les exemples à ce que je voulais, je ne pouvais pas obtenir le résultat souhaité. Je me demandais quelle est la bonne façon de transmettre des données au paramètre "données" du graphique ?.Graphiques sur les rails 3 utilisant les graphiques

Je copié à partir de l'Internet le code suivant (juste pour le test):

 series: [  
     { 
     type: 'pie', 
     name: '2008', 
     size: '45%', 
     innerSize: '20%', 
     data: [ 
      { name: 'Firefox', y: 45.0, color: '#4572A7' }, 
      { name: 'IE', y: 26.8, color: '#AA4643' }, 
      { name: 'Chrome', y: 12.8, color: '#89A54E' }, 
      { name: 'Safari', y: 8.5, color: '#80699B' }, 
      { name: 'Opera', y: 6.2, color: '#3D96AE' }, 
      { name: 'Mozilla', y: 0.2, color: '#DB843D' }  
      ]    
     } 
     ]

Autre moyen est le passage de données comme:

series: [  
     { 
     type: 'pie', 
     name: '2008', 
     size: '45%', 
     innerSize: '20%', 
data: [ 
     ['IE', 46.6], 
     ['Chrome', 3.1], 
     ['Safari', 2.7], 
     ['Opera', 2.3], 
     ['Mozilla', 0.4]   
    ] 
    }]

Comme vous pouvez le voir, les données que je suis l'utilisation est statique. Et si je veux utiliser les informations de mon db?. Donc, depuis que j'ai deux ou trois modèles:

class Frame < ActiveRecord::Base  class FrString < ActiveRecord::Base 
    attr_accessible :name, :total   attr_accessible :frame_id,:name,:total 

    has_many :fr_strings     belongs_to :frame 
end         end

Je croyais que la création d'un tableau de tableaux à utiliser éventuellement comme source de données pour mes cartes serait une bonne idée .... pas si bon en apparence.

<% _data=[] %> 
<%Frame.all.each do |frame|%> 
    <% _data << [frame.name,frame.fr_strings.sum(:total)]%> 
<%end%>

La tarte est pas ploting.So Je vous serais reconnaissant toute aide à ce sujet

Edit (sortie Javascript)

Quand je passe le paramètre "data" comme:

data: [     
     <%_data.each do |d|%> 
      <%=d%>, 
      <%end%>     
    ]

Il me donne:

<!DOCTYPE html> 
    <html> 
    <head> 
    <title>Charts</title> 
     <link href="/stylesheets/application.css?1305016385" media="screen" rel="stylesheet" type="text/css" /> 
    <script src="/javascripts/application.js?1304963001" type="text/javascript">  </script> 
    <script src="/javascripts/jquery-1.4.2.min.js?1305020819" type="text/javascript"></script> 
    <script src="/javascripts/rails.js?1305020831" type="text/javascript"></script> 
    <script src="/javascripts/highcharts.js?1305029094" type="text/javascript"></script> 

    <meta name="csrf-param" content="authenticity_token"/> 
    <meta name="csrf-token" content="G4k7DrZNfIcJt4Dlbz7JzNViSjQ+OGPUAVY4rW+XAxY="/> 
    </head> 
<body> 
     <script type="text/javascript" charset='utf-8'> 
      $(function(){ 
     new Highcharts.Chart({   
      chart: { 
      renderTo: 'frames_chart', 
      margin: [50, 0, 0, 0], 
      plotBackgroundColor: 'none', 
      plotBorderWidth: 0, 
      plotShadow: false    
     }, 
     title: { 
      text: 'CHART TITLE' 
     }, 
     subtitle: { 
      text: 'Inner circle: 2008, outer circle: 2010' 
     }, 
     tooltip: { 
      formatter: function() { 
      return '<b>'+ this.series.name +'</b><br/>'+ 
       this.point.name +': '+ this.y +' %'; 
      } 
     }, 
     series: [  
     { 
      type: 'pie', 
      name: '2008', 
      size: '60%', 
      innerSize: '10%', 
      data: [ 
       [&quot;Car&quot;, 93.0] 
       [&quot;House&quot;, 91.0] 
      ], 
      dataLabels: { 
      enabled: false 
      } 
      },   
     ] 
    }); 
    }); 
</script> 

    <div id="frames_chart" style="width:560px; height:300px"></div> 

</body> 
</html>

Est-ce que cette syntaxe est "" **** "" est ce qui gâte les choses ici?. J'ai revérifié le tableau _data et c'est comment il est rempli.Peut-être le problème concerne la façon dont je récupère des données?

Source

2011-05-12 Daniel

Qu'est-ce que le produit javascript source de ressembler après que des rails de code fonctionne? – NT3RP

@ NT3RP-J'ai ajouté une section "Edit" avec la sortie – Daniel

Je pense que ce que vous obtenez en HTML n'est tout simplement pas un code JavaScript valide et n'est pas interprété. Effectuez les actions suivantes:

data: [     
    <%_data.each do |d|%> 
     <%=raw d %>, 
     <%end%>     
]

La directive brute devrait supprimer le & quot code html que vous voyez pour les citations.

Si cela ne vous aide pas, pouvez-vous vérifier si vous avez des erreurs javascript en utilisant une extension de navigateur? Pour Google Chrome, vous pouvez aller dans Outils -> Outils de développement et voir si vous avez des erreurs js dans votre page.

Edit: Vous pouvez aussi avoir besoin de marquer 'd' comme html_safe, comme ça:

data: [     
    <%_data.each do |d|%> 
     <%=raw d.html_safe %>, 
     <%end%>     
]

Source

2011-05-26 08:17:44 Svilen

<%raw d%> l'a fait pour moi! .Quand l'utilisation de html_safe ne fonctionnerait pas car il n'y a pas de méthode html_safe pour ma variable d (elle s'applique uniquement aux variables de chaîne AFAIK) .Mais merci pour prendre le temps.Maintenant, il trace les résultats !! – Daniel

Ah, oui, vous avez raison, bon point! – Svilen

Graphiques sur les rails 3 utilisant les graphiques

Répondre

Questions connexes