2

そこで、Google の Chart API を使用して、タイド タイムを折れ線グラフにマッピングしようとしています。ただし、グラフにプロットされたポイントは、正しい日付と時刻の値に対応していません。

データは日時 (x 軸) と潮の高さ (y 軸) の形式です。日時の値を正しく作成しているのか、それとも API が奇妙なことをしているだけなのかわかりません。

たとえば、tideTimes 配列の最後の日付は 11 月 1 日ですが、グラフは 12 月のデータ ポイントを示しています。この動作は下の画像で確認できます。これらのエラーを再現できるように、以下のコードを追加しました。

誰かが私が間違っていることを教えてくれれば、それは大歓迎です。 Google チャート API で間違ったデータ ポイントを表示する

    <html>
      <head>
        <script type="text/javascript" src="https://www.google.com/jsapi"></script>
        <script type="text/javascript">

        google.load("visualization", "1", {packages:["corechart"]});
          google.setOnLoadCallback(drawWeekChart);
          function drawWeekChart() {

            var data = new google.visualization.DataTable();
            data.addColumn('datetime', 'Date');
            data.addColumn('number', 'Wave Height (Meters)');
            var tideTimes = [
                [new Date(2012, 10, 29, 05, 44, 00, 00), 9.12],
                [new Date(2012, 10, 29, 11, 47, 00, 00), 1.62],
                [new Date(2012, 10, 29, 18, 01, 00, 00), 9.23],
                [new Date(2012, 10, 30, 00, 01, 00, 00), 1.55],
                [new Date(2012, 10, 30, 06, 16, 00, 00), 9.20],
                [new Date(2012, 10, 30, 12, 16, 00, 00), 1.58],
                [new Date(2012, 10, 30, 18, 33, 00, 00), 9.21],
                [new Date(2012, 10, 31, 00, 29, 00, 00), 1.54],
                [new Date(2012, 10, 31, 06, 46, 00, 00), 9.21],
                [new Date(2012, 10, 31, 12, 45, 00, 00), 1.60],
                [new Date(2012, 10, 31, 19, 04, 00, 00), 9.12],
                [new Date(2012, 11, 01, 00, 58, 00, 00), 1.59]
            //  new Date( YYYY, MM, DD, HH, MM, SS, MS), height]
                        ];
            data.addRows(tideTimes);

            var options = {
                title: 'Tide Times',
                smoothLine: true,
                width: 984,
                height: 600
            };

            var chart = new google.visualization.LineChart(document.getElementById('tide_chart_week'));
            chart.draw(data, options);
          }

        </script>
      </head>
      <body>
    <div id="tide_chart_week" stye="float:left; height:800px; background:blue;"></div>
      </body>
    </html>
4

3 に答える 3

6

月は 0 ～ 11 の整数でなければなりません。

Date() コンストラクターのドキュメントを確認してください [0]

month 月を表す整数値で、1 月の 0 から 12 月の 11 までです。

tideTimesそれに応じて変数を変更するだけです

 var tideTimes = [
            [new Date(2012, 9, 29, 05, 44, 00, 00), 9.12],   // october
            //.....
            [new Date(2012, 10, 01, 00, 58, 00, 00), 1.59]   // november
 ];

また、グラフの横軸の形式を変更して、よりわかりやすい日付を表示することもできます 

 var options = {
     /*.. current options ..*/
     hAxis:  {format:'MMM d, y'}
 };

例

例を次に示します: http://jsfiddle.net/jaimem/F4Gzr/1/

[0] https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Global_Objects/Date

于 2012-10-30T00:05:08.063 に答える
1

jm が指摘したように、ECMAScript では月はゼロベースなので:

new Date(2012, 10, 31, 19, 04, 00, 00)

2012 年 11 月 31 日で、2012 年 12 月 1 日の日付が作成されます (11 月は 30 日しかないため)。

new Date(2012, 11, 01, 00, 58, 00, 00)

2012 年 12 月 1 日でもあります。

于 2012-10-30T00:22:25.800 に答える