5

我对 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
4

3 回答 3

7

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

  • 您需要 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+），我建议将您的 javascript 移动到更传统的位置。在 3.1 中，rails 喜欢在其中看到它，app/assets/javascripts 但public/javascripts仍然很好，只是不完全传统。

通过了解用于插入脚本标签和Asset Pipeline的rails 助手，您将获得很多帮助。

祝你好运！

于 2012-06-25T23:40:12.270 回答
1

问题出在源代码的第一行，即var charts; 删除它，您就完成了。

于 2012-10-20T13:20:11.080 回答
1

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

new Highcharts.Chart({ Chart is with small c

于 2017-04-16T05:47:52.773 回答