xAxis highcharts 的 created_at 日期答案

【问题标题】：created_at date for xAxis highchartsxAxis highcharts 的 created_at 日期
【发布时间】：2012-09-11 03:41:03
【问题描述】：

下面是我现在拥有的代码。这为我提供了一个完美的所需数据的二维数组（数组数组），因为据我所知，这是使用 Highstock 完成我正在寻找的最佳方法。

我认为我必须做的最后一步是将其转换为适合 highstock 的格式：Date.UTC(2012, 9, 12)

我希望它看起来像这样：http://jsfiddle.net/DkgVr/4/

知道我怎样才能得到这样的日期吗？

现在的数组如下所示：[[Thu, 13 Sep 2012, 215.0], [Wed, 12 Sep 2012, 211.0]]

用户控制器

@weight_items = Weight.order("date DESC").select('weights.content,  weights.date').all

高库存

<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: <%= weight_and_date_array = @weight_items.map{|row| [row.date.to_date, row.content.to_f] } %>

        }]
    }, 

    function(chart){

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


      });
  });

});
</script>

【问题讨论】：

@Jugal 对此感到抱歉，我是一名 n00b，并没有意识到这很重要。我刚刚经历并接受了我的问题的正确答案。感谢您的提醒！
太好了，感谢！！！标记答案与给出答案一样重要，它可以帮助未来面临类似问题的访问者准确了解哪个答案有帮助，从而节省浏览所有提交答案的时间
@Hardik 我昨晚实际上切换到 highstock，但它本质上仍然是同一个问题。我将 datetime 作为 xAxis 类型，但我不知道如何获取“created_at”日期的数组并将其作为 xAxis 上的刻度放入其中。
@JugalThakkar 非常聪明的想法。以后一定会牢记！
@SteveQ：你能提供 HighStock 的代码 sn-p 吗？

标签： sql ruby-on-rails ruby-on-rails-3.2 highcharts lazy-high-charts

【解决方案1】：

你不需要

xAxis: {
            type: 'datetime'
       }

对于 HighStock。还有

{
    pointInterval: <%= 1.day * 1000 %>,
    pointStart: <%= 3.weeks.ago.at_midnight.to_i * 1000 %>,
    name: 'Weight',
    data: <%= Weight.pluck(:content).reverse %>
}

Highstock 不需要。只保留name 和data。

可以使用 X 轴选项中的tickInterval 指定间隔。

编辑：编辑后，您似乎在以HighStock 兼容格式添加日期时遇到问题。

所以，添加 UTC 日期。使用 Ruby 将日期转换为 UTC，HighStock 库会自动选择它。

【讨论】：

我取出了 xAxis 部分。需要 pointInterval 和 Pointstart 来设置默认日期。我打算玩一下tickInterval，看看是否能找到合适的日期。感谢您的帮助！
如果需要任何其他帮助，请回来
我将代码更新为我目前拥有的。我想我已经很接近解决这个问题了。如果可以的话，我会很感激你的帮助！
@SteveQ：添加日期时，请以 UTC 格式添加。检查如何使用 Ruby 转换 UTC 日期。（我不知道 Ruby）。并且不要完全改变问题。如果是新问题，您应该创建新问题