0

在我的应用程序中，用户记录他们的体重和体重所属的日期。我希望该数据显示在 HighStock 折线图中。应该很简单，但在过去的 2 个月里，我一直在研究这个（部分）。我看过很多不同的东西，但我无法让它发挥作用。

我想显示的确切数据是折线图中的实际线作为他们的体重，y 轴将是他们的体重，x 轴将是用户输入该体重的日期。

即用户在表格中输入他们昨天的体重为 135，他们在表格中输入的日期是 2012 年 12 月 3 日。

不知道是否重要，但用户有_许多权重，权重属于_用户。

这就是我所拥有的，我得到了一堆不同的错误。我肯定在这里错过/不理解一些东西：

重量型号：

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

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


    });
});

});

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

4

1 回答 1

0

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

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

  });
});
于 2014-02-21T20:33:12.940 回答