Question

以下是我现在拥有的代码。这给了我一个二维数组（数组数组）我需要的数据是完美的，因为从我可以告诉我这是我用Highstock寻找的最佳方法。

我认为我必须做的最后一步是将其变为适合highstock的格式：Date.UTC（2012,9,12）

知道如何才能让日期如此？

阵列现在看起来像这样：[[星期四，2012年9月13日，215.0]，[星期三，2012年9月12日，211.0]]

用户控制器

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

Highstock

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

Answer 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 highcharts的created_at日期

1 个答案: