3

hereのモデルに従って、Rickshaw javascript ライブラリを使用して、いくつかのグラフィカルな値を表示しています。描画されるデータは、Ajax 呼び出しによって提供されます。次に例を示します。

[{"色":"#65A1CC","データ":[{"x":1383906402000,"y":22.31},{"x":1383906428000,"y":22.38},{"x":1383906452000 ,"y":22.31},{"x":1383906477000,"y":22.38},{"x":1383906502000,"y":22.38},{"x":1383906527000,"y":22.38}, {" x":1383906552000,"y":22.31},{"x":1383906577000,"y":22.31}],"名前":"センサー 1"},{"色":"#CC9065"," data":[{"x":1383906402000,"y":22.38},{"x":1383906427000,"y":22.38},{"x":1383906452000,"y":22.38},{" x":1383906477000,"y":22.38},{"x":1383906502000,"y":22.38},{"x":1383906527000,"y":22.38},{"x":1383906552000,"y":22.38},{"x":1383906577000,"y":22.38}],"名前":"センサー 2"}]

ここで指定された long 値は、Fri Nov 08 13:26:42 FET 2013 から Fri Nov 08 13:29:37 FET 2013 までのデータ時間です。

ただし、結果のグラフにカーソルを合わせると、下の画像のように、さまざまな値の日付が「Sat Apr. 03」のように表示されます。理由がわかりません。javascript でデータを繰り返し処理すると、javascript の Date オブジェクトは 4 月ではなく 11 月の時刻を示します。

ここに画像の説明を入力

コードは次のとおりです。

<div id="chart_container">
<div id="chart" style="background-color: white;"></div>
<div id="legend_container">
    <div id="smoother" title="Smoothing"></div>
    <div id="legend"></div>
</div>
<div id="slider"></div>


$.ajax({                        
         type : "POST",
         dataType: "json",
         url : "/myApp/someURL",
         data: { pack:selectedpack} 
      }
     ).done(function(data) {
        showDashboard(data);
    }); 

function showDashboard(data) {
    $("#charts").show();
    $("#chart").empty();
    $("#legend").empty();

    var graph = new Rickshaw.Graph({
        element: document.getElementById("chart"),
        width: 1000 - 130,
        height: 400,
        renderer: 'line',
        series: data
    });

    graph.render();

    var slider = new Rickshaw.Graph.RangeSlider({
        graph: graph,
        element: $('#slider')
    });

    var hoverDetail = new Rickshaw.Graph.HoverDetail({
        graph: graph
    });

    var legend = new Rickshaw.Graph.Legend({
        graph: graph,
        element: document.getElementById('legend')

    });

    var shelving = new Rickshaw.Graph.Behavior.Series.Toggle({
        graph: graph,
        legend: legend
    });

    var axes = new Rickshaw.Graph.Axis.Time({
        graph: graph
    });
    axes.render();
}

以下の js ファイルが含まれています。jquery-ui.min.js, d3.v2.js, rickshaw.js, Rickshaw.Class.js, Rickshaw.Compat.ClassList.js, Rickshaw.Graph.js, Rickshaw.Graph.Renderer.js, Rickshaw.Graph.Renderer.Area.js, Rickshaw.Graph.Renderer.Line.js, Rickshaw.Graph.Renderer.Bar.js, Rickshaw.Graph.Renderer.ScatterPlot.js, Rickshaw.Graph.RangeSlider.js, Rickshaw.Graph.HoverDetail.js, Rickshaw.Graph.Annotate.js, Rickshaw.Graph.Legend.js, Rickshaw.Graph.Axis.Time.js, Rickshaw.Graph.Behavior.Series.Toggle.js, Rickshaw.Graph.Behavior.Series.Order.js, Rickshaw.Graph.Behavior.Series.Highlight.js, Rickshaw.Graph.Smoother.js, Rickshaw.Graph.Unstacker.js, Rickshaw.Fixtures.Time.js, Rickshaw.Fixtures.Time.Local.js, Rickshaw.Fixtures.Number.js, Rickshaw.Fixtures.RandomData.js, Rickshaw.Fixtures.Color.js, Rickshaw.Color.Palette.js, Rickshaw.Graph.Axis.Y.js

4 月ではなく 11 月を取得するにはどうすればよいですか?

ありがとう。

4

1 に答える 1

4

ミリ秒ではなく秒単位で渡す必要があるため、時間データを で割る必要があります1000。たとえば、代わり1383906452000に1383906452.

クライアント側でサーバー側から秒単位の時間値を返すことができない場合は、 を呼び出す前に次を使用できますshowDashboard(data)。

$(data).each(function (e, i) {
    $(i.data).each(function (f, j) {
        j.x = j.x / 1000;
    });
});
于 2013-11-11T09:11:28.113 に答える