Javascript Highchart/ROR-从数据库表中提取数据

我已经实现了一个rails应用程序。我现在尝试扩展它，以便它列出在特定项目上花费的小时数。我已经建立了一个JSFIDLE示例来说明我正在努力实现的目标。我最初试图做的是：

• 当前登录用户转到他们的时间表，选择一个或多个项目，输入他们的小时数
• 输入的小时数和选定的项目将记录到ProjectsHours表中
• 然后，当前用户可以访问ProjectHours页面，该页面将从ProjectsHours表中提取数据，并像我提供的JSFIDLE示例一样显示数据

我已经做了一些研究，我认为这可能是如何做到的。我在街上看到 您可以通过设置Ajax请求来请求数据

我写这个问题是因为我还是ror和javascript的初学者

我还实现了一个autocomplete函数，它使用ajax请求并使用JSON检索数据。我将我的autocomplete函数设置为如下，这有点不相关，但是我为我的autocomplete发布了以下javascript代码，因为。我个人认为，我正在尝试做的事情将与我正在尝试做的事情略有相似。我可能错了。如果有人能纠正我，谢谢

自动完成

Application.js

function log(message) {
        $( "<div/>" ).text( message ).prependTo("#log");
    }

    $("#tags1").autocomplete({
        minLength: 2,
        source: function(request, response) {
            $.ajax({
                url: "/positionlist",
                dataType: "json",
                data: {
                    style: "full",
                    maxRows: 12,
                    term: request.term
                },
                success: function(data) {
                    var results = [];
                    $.each(data, function(i, item) {
                        var itemToAdd = {
                            value: item,
                            label: item
                        };
                        results.push(itemToAdd);
                    });
                    return response(results);

                }
            });
        }
    });  

功能日志（消息）{
$（“”）.text（message）.prependTo（“#log”）；
}
$（“#标记1”）。自动完成({
最小长度：2，
来源：功能（请求、响应）{
$.ajax({
url:“/positionlist”，
数据类型：“json”，
数据：{
样式：“完整”，
马克斯罗：12，
期限：request.term
},
成功：功能（数据）{
var结果=[]；
$。每个（数据、功能（i、项）{
var itemToAdd={
价值:项目,，
标签：项目
};
结果：推送（itemToAdd）；
});
返回响应（结果）；
}
});
}
});  

在将AJAX与highcharts结合使用时，我通常会执行以下操作：

 setInterval(function(){
  $.getJSON('traffic_sources.json', null, function(data) {
      pie_chart("traffic_sources_graph", data.traffic_sources);
  });
 }, 3000);

function pie_chart(div, data)
{
   new Highcharts.Chart({
      chart: {
         renderTo: div,
         backgroundColor: '#dddddd'
      },
      title: false,
      tooltip: {
         formatter: function() {
            return '<b>'+ this.point.name +'</b>: '+ this.y +' %';
         }
      },
      plotOptions: {
         pie: {
            allowPointSelect: true,
            cursor: 'pointer',
            dataLabels: {
               enabled: false
            },
            showInLegend: true
         }
      },
      legend: {
         layout: 'vertical',
         align: 'right',
         floating: false,
         labelFormatter: function() {
            return this.name + "(" + this.y + ")";
         }
      },
       series: [{
         type: 'pie',
         name: 'Browser share',
         data: data
      }]
   });
}

---

希望这能有所帮助。

在将AJAX与highcharts结合使用时，我通常会执行以下操作：

 setInterval(function(){
  $.getJSON('traffic_sources.json', null, function(data) {
      pie_chart("traffic_sources_graph", data.traffic_sources);
  });
 }, 3000);

function pie_chart(div, data)
{
   new Highcharts.Chart({
      chart: {
         renderTo: div,
         backgroundColor: '#dddddd'
      },
      title: false,
      tooltip: {
         formatter: function() {
            return '<b>'+ this.point.name +'</b>: '+ this.y +' %';
         }
      },
      plotOptions: {
         pie: {
            allowPointSelect: true,
            cursor: 'pointer',
            dataLabels: {
               enabled: false
            },
            showInLegend: true
         }
      },
      legend: {
         layout: 'vertical',
         align: 'right',
         floating: false,
         labelFormatter: function() {
            return this.name + "(" + this.y + ")";
         }
      },
       series: [{
         type: 'pie',
         name: 'Browser share',
         data: data
      }]
   });
}

---

希望这有帮助。

检查firebug输出，它访问什么URL，请求的响应是什么？我的自动完成功能工作正常。我想做的是使用highcharts发出Ajax请求，使用JSON收集有关当前用户时间表信息的信息，这些信息包括ProjectHours表中的以下属性：：week_Beging，：hours，：user_id，：project_task_idI添加了上面的示例代码，我只是想解释一下，我的想法是，它可能会使用类似于我使用自动完成功能的Ajax请求。JSFIDLE显示了我正在努力实现的目标，但我不知道如何实现这一目标。我在highcharts网站上查看了这个示例，但是它做了一些完全不同的事情，使用highchartsCheck firebug输出，它访问什么URL，请求的响应是什么？我的自动完成功能运行良好。我想做的是使用highcharts发出Ajax请求，使用JSON收集有关当前用户时间表信息的信息，这些信息包括ProjectHours表中的以下属性：：week_Beging，：hours，：user_id，：project_task_idI添加了上面的示例代码，我只是想解释一下，我的想法是，它可能会使用类似于我使用自动完成功能的Ajax请求。JSFIDLE显示了我正在努力实现的目标，但我不知道如何实现这一目标。我看了highcharts网站上的示例，但它做了一些完全不同的事情，使用HighChartsHanks进行响应，请看一看谢谢您的响应，请看一看