Rails数组到HighCharts，Highstock，二维数组中的javascript

Question

在我的应用程序中，用户记录他们的体重和体重所属的日期。 我希望该数据显示在HighStock折线图中。 应该很简单，但是过去两个月来我一直在（部分）进行这项工作。 我看了一堆不同的东西，但我无法使它正常工作。

我想显示的确切数据是折线图中的实际线条作为其重量，y轴表示其重量，x轴表示用户输入该重量的日期。

也就是说，用户在昨天的表格中输入的体重为135，而他们在表格中输入的日期为12/3/2012。

不知道这是否重要，但是用户有很多权重，一个用户的权重属于。

这是我所拥有的，并且遇到很多不同的错误。 我肯定在这里缺少/不了解一些东西：

重量型号：

class Weight < ActiveRecord::Base

 def user_weight_series(user, weight)
  weights_by_weight_date = Weights.select("date(weight_date) as dater, content as   weights")
   weights_by_weight_date.map do |record|
parts = %w[%Y %m %d].map{ |s| record.dater.send(s) }
"[Date.UTC(#{parts.join(',')}), #{record.weights}]"
  end
end

application.html.erb

  <script type="text/javascript">
    $(function () {
    var chart;
     $(document).ready(function() {
    window.chart = new Highcharts.StockChart({

        chart: {
            renderTo: 'weight_chart',
            type: 'line',
            marginRight: 20,
            marginBottom: 25
        },
        title: {
            text: 'Your Weight Over Time',
            x: -20 //center
        },
        yAxis: {
            title: {
                text: 'Weight'
            },
            plotLines: [{
                value: 0,
                width: 1,
                color: '#808080'
            }]
        },

        legend: {
            layout: 'vertical',
            align: 'center',
            verticalAlign: 'bottom',
            x: -10,
            y: 100,
            borderWidth: 0
        },

        scrollbar: {
          enabled: true
        },

        rangeSelector : {
            selected : 1
        },

        credits: {
            enabled: false
        },


        series: [{
            tickInterval: <%= 1.day * 1000 %>,
            pointStart: <%= 3.weeks.ago.at_midnight.to_i * 1000 %>,
            name: 'Weight',
            data: [ <%= current_user.user_weight_series(user, weight).join(", ") %> ],

        }]
    }, 

    function(chart){

        // apply the date pickers
        setTimeout(function(){
            $('input.highcharts-range-selector', $('#'+chart.options.chart.renderTo))
                .datepicker()
        },0)


    });
});

});

最好的方法是什么？ 先感谢您！

Answer 1

这是我使用的过程，以及一些入门的技巧：

1. 使用虚拟json数据填充图表，从想要创建的所需显示向后工作。

2. 弄清楚如何创建与虚拟json数据系列匹配的真实数据库数据的ruby哈希。 对于时间戳，请将其转换为高图可读的格式，如下所示：

    SOME_DATE.to_time.to_i * 1000 

3. 让您的一个控制器将生成的ruby哈希呈现为json。

    def some_controller_method @chart_data_series = [] // your desired series here respond_to do |format| format.json { render :json => @chart_data_series } end end 

4. 从相应的页面中读取此json并将其传递到图表系列中。 一种方法是使用d3 ：

    function buildChart(){ d3.json("/path/to/your/data.json", function(error, json_data) { $('#chart_container').highcharts({ chart: {type: 'column'}, // options, options, etc series: json_data, // options, options, etc }); }); });