Question

我对Javascript，Rails和JQuery都很陌生，所有人都在一起工作。

我将在Highcharts上阅读本教程（http://www.highcharts.com/documentation/how-to-use#installation），并尝试获取要显示的基本图表。它没有发生。

在我的home.html.erb文件中，我有：

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

在app/views/layouts/application.html.erb我的head代码中有此内容：

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

这是/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]
         }]
      });
   });

加载页面时没有任何内容出现，我不明白为什么。我已经完成了3到4次教程，并用Google搜索答案无济于事。任何帮助都将非常感激。

修改：我将脚本代码中的路径从/public/highcharts.js更改为/highcharts.js。这在我的控制台调试器中给了我以下错误：

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

正如我们在聊天中所讨论的那样，有一些缺失的部分。

您需要Highcharts图书馆的本地副本
您需要引用从中调用库的脚本正确的地方。

因此，简而言之，您需要在布局中使用它：

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

现在继续（假设您正在使用rails 3.1+），我建议将您的javascripts移动到更多传统的位置。在3.1中，rails喜欢在app/assets/javascripts中看到它，但public/javascripts仍然没问题，只是不完全传统。

通过了解rails helpers插入脚本标记和Asset Pipeline，您将获得很多了解。

祝你好运！

Answer 2

问题出在第一行来源var charts;删除它，你就完成了。

Answer 3

Chart关键字存在问题。请改变

new Highcharts.Chart（{Chart is with small c

只是让Highchart显示出来有麻烦

3 个答案: