Ich bin ein Neuling in der Zusammenarbeit von Javascript, Rails und JQuery.

Ich gehe dieses Tutorial (http://www.highcharts.com/documentation/how-to-use#installation) über Highcharts durch und versuche nur, ein Basisdiagramm anzuzeigen. Es passiert nicht.

In meiner home.html.erb Datei habe ich:

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

Imapp/views/layouts/application.html.erb Ich habe das in meinemhead Etikett:

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

Und das ist der Code 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]
         }]
      });
   });

Beim Laden der Seite wird nichts angezeigt, und ich habe keine Ahnung, warum. Ich habe das Tutorial drei- oder viermal durchgearbeitet und nach der vergeblichen Antwort gegoogelt. Jede Hilfe wäre sehr dankbar.

Bearbeiten: Ich habe den Pfad im Skript-Tag von geändert/public/highcharts.js zu/highcharts.js. Das gab mir die folgenden Fehler in meinem Konsolendebugger:

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