Gặp sự cố khi chỉ nhận Highchart hiển thị

Question

Tôi khá mới với Javascript, Rails và JQuery đều làm việc cùng nhau.

Tôi đang xem qua hướng dẫn này (http://www.highcharts.com/documentation/how-to-use#installation) trên Highcharts và chỉ cố gắng lấy biểu đồ cơ sở để hiển thị. Nó không xảy ra.

Trong file home.html.erb của tôi, tôi có:

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

Trong app/views/layouts/application.html.erb Tôi có điều này trong head thẻ của tôi:

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

Và đây là mã trong /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] 
     }] 
     }); 
    }); 

Không có gì hiển thị khi tôi tải trang và tôi không biết tại sao. Tôi đã thực hiện các hướng dẫn 3 hoặc 4 lần và Googled xung quanh cho câu trả lời vô ích. Bất cứ sự giúp đỡ nào cũng được đánh giá cao.

Chỉnh sửa: Tôi đã thay đổi đường dẫn trong thẻ tập lệnh từ /public/highcharts.js thành /highcharts.js. Điều đó đã cho tôi các lỗi sau trong Trình gỡ lỗi bảng điều khiển của tôi:

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

Như chúng ta đã thảo luận trong trò chuyện, có một vài phần còn thiếu.

• Bạn cần một bản sao cục bộ của thư viện Highcharts
• Bạn cần phải tham khảo kịch bản của bạn mà các cuộc gọi thư viện từ địa điểm chính xác.

Vì vậy, trong ngắn hạn, bạn cần thiết này trong cách bố trí của bạn:

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

Bây giờ đi về phía trước (giả sử bạn đang làm việc w/ray 3.1+), tôi muốn đề nghị di chuyển javascripts của bạn đến một nhiều thông thường vị trí. Trong 3.1, đường ray thích nhìn thấy nó trong app/assets/javascripts nhưng public/javascripts vẫn ổn, chỉ cần không chính xác thông thường.

Bạn sẽ nhận được rất nhiều milage bằng cách hiểu được rails helpers để chèn thẻ tập lệnh và Asset Pipeline.

Chúc may mắn!

Answer 2

Sự cố ở dòng đầu tiên của nguồn là var charts; xóa nó và bạn đã hoàn tất.

Answer 3

Có vấn đề với từ khóa Biểu đồ. Vui lòng thay đổi như

mới Highcharts.Chart ({Chart là với nhỏ c