Problemi nell'ottenere l'Highchart per mostrare

Sono abbastanza nuovo per Javascript, Rails e JQuery che lavorano tutti insieme.Problemi nell'ottenere l'Highchart per mostrare

Sto passando questo tutorial (http://www.highcharts.com/documentation/how-to-use#installation) su Highcharts e sto solo cercando di ottenere un grafico di base da mostrare. Non sta succedendo.

Nel mio file home.html.erb ho:

<div id="container" style="width: 100%; height: 400px"></div>

In app/views/layouts/application.html.erb ho questo nel mio head tag:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script> 
    <script src="/public/highcharts.js" type="text/javascript"></script>

E questo è il codice in /public/highcharts.js:

var chart1; // globally available 
$(document).ready(function() { 
     chart1 = new Highcharts.Chart({ 
     chart: { 
      renderTo: 'container', 
      type: 'bar' 
     }, 
     title: { 
      text: 'Fruit Consumption' 
     }, 
     xAxis: { 
      categories: ['Apples', 'Bananas', 'Oranges'] 
     }, 
     yAxis: { 
      title: { 
       text: 'Fruit eaten' 
      } 
     }, 
     series: [{ 
      name: 'Jane', 
      data: [1, 0, 4] 
     }, { 
      name: 'John', 
      data: [5, 7, 3] 
     }] 
     }); 
    });

Non viene visualizzato nulla quando carico la pagina e non ho idea del perché. Ho fatto il tutorial 3 o 4 volte e ho cercato su Google la risposta senza alcun risultato. Qualsiasi aiuto sarebbe molto apprezzato.

Modifica: ho modificato il percorso nel tag dello script da /public/highcharts.js a /highcharts.js. Che mi ha dato i seguenti errori nel mio Console Debugger:

Uncaught ReferenceError: Highcharts is not defined highcharts.js:3 
(anonymous function) highcharts.js:3 
f.Callbacks.n jquery.min.js:2 
f.Callbacks.o.fireWith jquery.min.js:2 
e.extend.ready jquery.min.js:2 
c.addEventListener.B

fonte

2012-06-25 Zack Shapiro

il percorso del JS dovrebbe essere 'highcharts.js' senza la parte pubblica. A proposito, Rails aiutanti come' javascript_include_tag' non troverà nella radice della directory pubblica. Se vuoi usare quell'helper, lo vorrai in './public/javascripts' o'./ app/assets/javascripts' a seconda della versione dei binari che stai utilizzando. – Brian

Hai errori JavaScript nella console del debugger nel tuo browser? –

@Brian l'unico punto in cui viene fatto riferimento al percorso di highcharts.js è nel tag head di 'application.html.erb', come ho detto sopra –

Come abbiamo discusso in chat, ci sono stati alcuni pezzi mancanti.

È necessaria una copia locale della biblioteca Highcharts
Avevi bisogno di fare riferimento lo script che chiama la libreria dal posto giusto .

Così, in breve, è bisogno di questo nel layout:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script> 
<script src="/javascripts/js/highcharts.js" type="text/javascript"></script> <!--where you put the high charts library --> 
<script src="/highcharts.js" type="text/javascript"></script> <!-- your script -->

Ora andando avanti (supponendo che si sta lavorando w/rotaie 3.1+), suggerirei di spostare i javascript ad una più posizione convenzionale. Nella versione 3.1, le rotaie preferiscono vederlo in app/assets/javascripts ma public/javascripts è ancora valido, ma non esattamente convenzionale.

Otterrete un sacco di miliardo comprendendo il rails helpers per inserire tag di script e il Asset Pipeline.

Buona fortuna!

fonte

2012-06-25 23:40:12 Brian

Grazie ancora per tutto il tuo aiuto, Brian! –

Il problema è nella prima riga di origine che è var charts; rimuoverlo e il gioco è fatto.

fonte

2012-10-20 13:20:11 Sahil

C'è un problema con la parola chiave del grafico. Per favore cambia come

nuovo Highcharts.Chart ({Chart è con piccolo c

fonte

2017-04-16 05:47:52

In realtà, questo non è corretto. Entrambe le strade funzioneranno. –

Problemi nell'ottenere l'Highchart per mostrare

risposta

Problemi correlati