0

下面是我现在拥有的代码。这为我提供了一个完美的所需数据的二维数组（数组数组），因为据我所知，这是使用 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>
4

1 回答 1

0

你不需要

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唯一。

可以使用tickIntervalX 轴选项指定间隔。

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

因此，在 UTC 中添加日期。使用 Ruby 将日期转换为 UTC，HighStock库将自动选择它。

于 2012-09-12T03:44:26.270 回答