Problemy z tym, że po prostu Highchart pokazuje

Question

Jestem całkiem nowy dla Javascript, Rails i JQuery, wszystkie pracują razem.

Przechodzę przez ten samouczek (http://www.highcharts.com/documentation/how-to-use#installation) w Highcharts i próbuję po prostu wyświetlić wykres podstawowy. To się nie dzieje.

W moim pliku home.html.erb mam:

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

W app/views/layouts/application.html.erb mam to w moim head tagu:

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

I to jest kod w /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] 
     }] 
     }); 
    }); 

Nic nie wyświetla się po załadowaniu strony i nie mam pojęcia dlaczego. Zrobiłem samouczek 3 lub 4 razy i wyszukiwałem go, aby uzyskać odpowiedź bez skutku. Każda pomoc będzie ogromnie doceniona.

Edytuj: Zmieniono ścieżkę w tagu skryptu z /public/highcharts.js na /highcharts.js. To dało mi następujące błędy w moim debugerze konsolowym:

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

Jak już mówiliśmy na czacie, było kilka brakujących elementów.

• Potrzebowałeś lokalną kopię biblioteki Highcharts
• trzeba było odwołać swój skrypt, który wywołuje bibliotekę z właściwym miejscu .

Więc, krótko mówiąc, trzeba było to w układzie:

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

Teraz idzie do przodu (przy założeniu, że użytkownik pracuje w/szyny 3.1 i nowsze), sugeruję przenoszenia javascripts do bardziej konwencjonalna lokalizacja. W wersji 3.1, szyny lubią je widzieć w app/assets/javascripts, ale public/javascripts jest nadal w porządku, po prostu nie jest to dokładnie konwencjonalna.

Otrzymasz dużo milażu dzięki zrozumieniu rails helpers, aby wstawić znaczniki skryptów i Asset Pipeline.

Powodzenia!

Answer 2

Problem polega na usunięciu pierwszego wiersza źródła, czyli var charts;, i gotowe.

Answer 3

Wystąpił problem ze słowem kluczowym Wykres. Proszę zmienić jak

nowego Highcharts.Chart ({Wykres jest z małej c