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

Question

我有一个实施了 highcharts 的 rails 应用程序。我现在正在尝试扩展它，以便它列出在特定项目上花费的小时数。我已经设置了一个 JSfiddle 示例来说明我想要实现的目标。 JSfiddle 我最初想做的是：

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

我已经对我认为可能如何完成进行了一些研究。我在highcharts website 上看到了 您可以通过设置 Ajax 请求来请求数据。

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

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

自动完成

应用程序.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);

                }
            });
        }
    });  

Answer 1

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

上面的 JSON 看起来像这样，但是这是一个饼图，对于一个条形图，数据可能略有不同：

{"traffic_sources":[["Direct",5465465],["Search Engines",345876],["Referring Sites",4578767]]}

希望这会有所帮助。