Tengo problemas solo para mostrar Highchart

Question

Soy bastante nuevo en Javascript, Rails y JQuery trabajan todos juntos.

Estoy repasando este tutorial (http://www.highcharts.com/documentation/how-to-use#installation) en Highcharts y estoy tratando de obtener un gráfico base para mostrar. No está sucediendo

En mi archivo tengo home.html.erb:

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

En app/views/layouts/application.html.erb tengo unas pocas cosas en mi head etiqueta:

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

Y este es el código en /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] 
     }] 
     }); 
    }); 

No aparece nada cuando cargo la página y no tengo idea de por qué. He hecho el tutorial 3 o 4 veces y busqué en Google la respuesta en vano. Cualquier ayuda sería muy apreciada.

Editar: Cambié la ruta en la etiqueta de secuencia de comandos de /public/highcharts.js a /highcharts.js. Eso me dio los siguientes errores en el depurador de consola:

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 

Answer 1

Como hemos comentado en el chat, había unas pocas piezas que faltan.

• Usted necesita una copia local de la biblioteca Highcharts
• Necesitabas hacer referencia a su secuencia de comandos que llama a la biblioteca desde el lugar correcto .

Así que, en resumen, se necesitaba esto en su diseño:

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

ahora en adelante (suponiendo que está trabajando w/3.1 + carriles), sugeriría mover los archivos JavaScript a una mayor ubicación convencional. En 3.1, a los rieles les gusta verlo en app/assets/javascripts pero public/javascripts está todavía bien, simplemente no exactamente convencional.

Obtendrá una gran cantidad de millas al comprender el rails helpers para insertar etiquetas de secuencia de comandos y el Asset Pipeline.

¡Buena suerte!

Answer 2

El problema está en la primera línea de origen que es var charts; eliminarlo y listo.

Answer 3

Hay un problema con la palabra clave Chart. Por favor cambia como

nueva Highcharts.Chart ({Chart es con c minúscula