Question

我试图让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文档中复制并粘贴）：

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<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]
        }]
    });
});

当我查看页面时，我收到错误＆＃34;错误的参数数量（9为1）＆＃34;在我的application.js文件中的行

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

我不确定该行的来源，但如果我发表评论

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

来自application.js的

错误消失了，但图表没有呈现，它只是将javascript显示为文本。

我错过了什么？

我应该补充一点，我是Rails新手，我不知道任何javascript。

编辑：整个项目的示例代码位于Dropbox。

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

Answer 1

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

现在你已经准备好了。

你的html标记，因为它是

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

<强>输出

output image

它对我有用。

Answer 2

问题是（很可能）你使用的是2.x版本，而使用jQuery的构造函数是在3.x版本中引入的。改变自：

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

要：

new Highcharts.Chart( options );

注意：在第二个构造函数中，您需要添加chart.renderTo来设置Highcharts的容器。

无法在Rails中使用高级图表

2 个答案: