0

以下は私が今持っているコードです。これにより、必要なデータの 2 次元配列 (配列の配列) が得られます。これは、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'
       }

ハイストック用。また

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

Highstock では必要ありません。保管nameしてくださいdata。

tickInterval間隔は、X 軸オプション を使用して指定できます。

編集:編集後、HighStock準拠した形式で日付を追加する際に問題が発生しているようです。

したがって、日付を UTC で追加します。Ruby を使用して日付を UTC に変換すると、HighStockライブラリが自動的に pickit します。

于 2012-09-12T03:44:26.270 に答える