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

Question

我对 Rails 很陌生，我试图从Highcharts.com将 javascri 图表导入到我的 Rails 应用程序中。但是由于某种原因，视图 Container 仍然是空的。

我已经下载了包并将其添加到 vendor/assets/javascripts 我已添加//= require highcharts到 application.js 文件中。这是我的 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>

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

提前致谢！

Answer 1

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

宝石文件

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

应用程序.js

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

显示.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>