将图表（javascript）导入Rails应用程序

我对rails非常陌生，我正试图从导入javascri图表到我的rails应用程序中。但由于某些原因，视图容器仍然为空

我已经下载了这个包，并将其添加到vendor/assets/javascripts中 我在application.js文件中添加了

/=require highcharts

。 这是我的users.js文件

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

我在show.html.erb中添加了这个

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

</div>

<div id="monitor_chart" style="width: 90%; height: 600px;" class ="graph"></div>



<script type="text/javascript" charset="utf-8">
  $(function () {
    new Highcharts.Chart({
    chart: { renderTo: 'monitor_chart' },
    title: { text: 'Estado del Servidor' },
    xAxis: { type: 'datetime',
              formatter: function() {
        return Highcharts.dateFormat('%a %d %b', this.value);
            }
          } ,
     yAxis: {
        title: { text: 'Porcentaje de utilización'}
     },
    series: [
    {
      pointInterval: <%= 1.minute * 1000 %>,
      pointStart: <%= 1.hour.ago.to_i  %>,
      data: <%= @agents.map { |data| [data.created_at.to_i, data.cpu_used]}.inspect %>,
      name: "CPU"
     },
      {
         pointInterval: <%= 1.minute * 1000 %>,
         pointStart: <%= 1.hour.ago.to_i%>,
         data: <%= @agents.map { |data| [data.created_at.to_i, data.mem_used]}.inspect %>,
      name: "Memoria"
      },
     {
         pointInterval: <%= 1.minute * 1000 %>,
         pointStart: <%= 1.hour.ago.to_i  %>,
         data: <%= @agents.map { |data| [data.created_at.to_i, data.disk_used]}.inspect %>,
        name: "Almacenamiento"
       }

   ]
  });    
  });
</script>

有人知道如何在show.html.erb上显示图表吗

<div id="monitor_chart" style="width: 90%; height: 600px;" class ="graph"></div>



<script type="text/javascript" charset="utf-8">
  $(function () {
    new Highcharts.Chart({
    chart: { renderTo: 'monitor_chart' },
    title: { text: 'Estado del Servidor' },
    xAxis: { type: 'datetime',
              formatter: function() {
        return Highcharts.dateFormat('%a %d %b', this.value);
            }
          } ,
     yAxis: {
        title: { text: 'Porcentaje de utilización'}
     },
    series: [
    {
      pointInterval: <%= 1.minute * 1000 %>,
      pointStart: <%= 1.hour.ago.to_i  %>,
      data: <%= @agents.map { |data| [data.created_at.to_i, data.cpu_used]}.inspect %>,
      name: "CPU"
     },
      {
         pointInterval: <%= 1.minute * 1000 %>,
         pointStart: <%= 1.hour.ago.to_i%>,
         data: <%= @agents.map { |data| [data.created_at.to_i, data.mem_used]}.inspect %>,
      name: "Memoria"
      },
     {
         pointInterval: <%= 1.minute * 1000 %>,
         pointStart: <%= 1.hour.ago.to_i  %>,
         data: <%= @agents.map { |data| [data.created_at.to_i, data.disk_used]}.inspect %>,
        name: "Almacenamiento"
       }

   ]
  });    
  });
</script>

---

提前谢谢

这就是我在应用程序中使用highcharts的方式

Gemfile 应用程序.js

//= require highcharts
//= require highcharts/highcharts-more

show.html.erb

<div id="monitor_chart" style="width: 90%; height: 600px;" class ="graph"></div>



<script type="text/javascript" charset="utf-8">
  $(function () {
    new Highcharts.Chart({
    chart: { renderTo: 'monitor_chart' },
    title: { text: 'Estado del Servidor' },
    xAxis: { type: 'datetime',
              formatter: function() {
        return Highcharts.dateFormat('%a %d %b', this.value);
            }
          } ,
     yAxis: {
        title: { text: 'Porcentaje de utilización'}
     },
    series: [
    {
      pointInterval: <%= 1.minute * 1000 %>,
      pointStart: <%= 1.hour.ago.to_i  %>,
      data: <%= @agents.map { |data| [data.created_at.to_i, data.cpu_used]}.inspect %>,
      name: "CPU"
     },
      {
         pointInterval: <%= 1.minute * 1000 %>,
         pointStart: <%= 1.hour.ago.to_i%>,
         data: <%= @agents.map { |data| [data.created_at.to_i, data.mem_used]}.inspect %>,
      name: "Memoria"
      },
     {
         pointInterval: <%= 1.minute * 1000 %>,
         pointStart: <%= 1.hour.ago.to_i  %>,
         data: <%= @agents.map { |data| [data.created_at.to_i, data.disk_used]}.inspect %>,
        name: "Almacenamiento"
       }

   ]
  });    
  });
</script>

$（函数（）{
新海图，海图({
图表：{renderTo:'monitor_chart'}，
标题：{text:'estadodelservidor'}，
xAxis:{type:'datetime'，
格式化程序：函数（）{
返回Highcharts.dateFormat（“%a%d%b”，此.value）；
}
} ,
亚克斯：{
标题：{文本：'Porcentaje de utilización'}
},
系列：[
{
点间隔：，
起点：，
数据：，
名称：“CPU”
},
{
点间隔：，
起点：，
数据：，
姓名：“备忘录”
},
{
点间隔：，
起点：，
数据：，
名称：“阿拉木图”
}
]
});    
});

谢谢，这在更简单的rails应用程序中起到了作用。但不是在更复杂的问题上。。。你对此也有解决办法吗？