Ruby on rails 无法使highcharts在Rails中工作

我正在尝试让Highcharts在Rails4应用程序中工作

我包括

gem 'highcharts-rails', '~> 3.0.0'

在我的application.js文件中，我有：

//= require highcharts
//= require highcharts/highcharts-more # to get the new features in 2.3.0

在我的Gemfile中，已将highcharts.js和highcharts-more.js复制到vendor/assets/javascripts。在我放置的一个.html.erb文件的顶部（从highcharts文档复制和粘贴）：

在application.js中，错误消失了，但图形没有呈现，它只是将javascript显示为文本

我错过了什么

我应该补充一点，我是Rails的新手，对javascript一无所知

编辑：整个项目的示例代码处于启用状态

---

Edit2：示例代码已更正，因此Javascript位于元素中。现在我看不到Javascript，但也看不到任何其他内容。

将gem添加到

Gemfile

中，您已经运行了

bundle install

命令

将其添加到您的

application.js

文件中

//= require jquery-1.8.2.min
//= require jquery-ui-1.8.1.custom.min
//= require scripts 
//= require_directory.

//=require scripts

//如果在script.js文件中有javascripts或jQuery函数

将

highcharts.js

添加到

app/assets/javascripts

目录下，您的

jQuery

都在该目录下

现在只需在布局文件中使用javascript include标记即可

<%= javascript_include_tag "application", "data-turbolinks-track" => true %>

输出

这对我很有用。

问题是（很可能）您使用的是2.x版本，而带有jQuery的构造函数是在3.x版本中引入的。更改为：

$('#container').highcharts( options );

致：

---

注意：在第二个构造函数中，您需要添加

chart.renderTo

来设置Highcharts的容器。

您还可以报告其他错误吗<代码>“参数数量错误（9代表1）”是非常不祥的！这就是我所得到的：显示C:/Users/User/RubymineProjects/tf2/app/views/layouts/application.html.erb，其中第6行出现：参数数量错误（9代表1）（在C:/Users/User/RubymineProjects/tf2/app/assets/javascripts/application.js:18中）应用程序中是否有jQuery？嗯。。。有没有可能发布渲染的

application.js

？该调用位于第18行，查看它所说的内容会很有帮助。H，页面上的标签是“Action Controller:Exception Capture”，页面标题是“ArgumentError in Scenarios#new”。这将我的错误消息更改为“找不到文件'jquery-1.8.2.min'（在C:/Users/User/RubymineProjects/tf2/app/assets/javascripts/application.js:13中）”在application.js文件中将jquery-1.8.2.min替换为jquery.min.js。如果javascript文件夹下没有jquery-ui-1.8.1.custom.min，也可以删除它。如果您提供了确切的名称，则会出现错误“找不到文件‘脚本’”。如果我从application.js中取出//=require scripts行，那么页面只会显示javascript列表（以及一个空格，我在其中放置了

，以保留空间）。请使用应用程序中的内容更新您的问题。即使是一个裸轨应用程序也是15KB的压缩版，因此我不能真正将我的应用程序包含在我的问题中！哪些位是相关的？什么的2.x版本？我用的是Highcharts的4.0.1版。这一行暗示了一些不同的东西：

/=require highcharts/highcharts more#为了获得2.3.0中的新功能

，这一行来自我正在剪切和粘贴的示例。尽管如此，使用新的Highcharts.Chart还是可以做到这一点，因此这会被标记为答案（尽管如果这是一种老式的做事方式，我仍然对更新Highcharts CDN的方式感兴趣），尝试从Highcharts CDN更新代码，以确保yu有4.0.1版本，而不是2.3.0。我肯定使用的是4.0.1；这就是Highcharts.version在Javascript控制台中返回的内容。此外，我几天前才下载了Highcharts！

//= require jquery-1.8.2.min
//= require jquery-ui-1.8.1.custom.min
//= require scripts 
//= require_directory.

<%= javascript_include_tag "application", "data-turbolinks-track" => true %>

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

$(function () {
    $('#container').highcharts({
        chart: {
            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]
        }]
    });
});

$('#container').highcharts( options );

new Highcharts.Chart( options );