Question

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

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

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

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

我还实现了一个自动完成功能，它使用ajax请求并使用JSON来检索数据。我将自动完成功能设置如下，这稍微无关紧要但是我为自动完成发布了以下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);

                }
            });
        }
    });

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

希望这有帮助。

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

1 个答案: