Google Chart API线图上的日期错误

Question

Google Chart API线图上的日期错误

jon*_*ock 2 javascript datetime google-visualization

因此,我尝试使用Google的Chart API在线图上绘制Tide次数.但是,图表上绘制的点与正确的日期和时间值不对应.

数据的形式为日期时间(x轴)和潮汐高度(y轴).我不确定我是否正确创建了日期时间值,或者API只是做了一些奇怪的事情.

例如,tideTimes数组中的最后一个日期是11月1日,但图表显示12月的数据点,您可以在下面的图片中看到此行为.我添加了下面的代码,以便您重新创建这些错误.

如果有人能告诉我我做错了什么,我将不胜感激. 在谷歌图表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>

Run Code Online (Sandbox Code Playgroud)

Answer 1

jai*_*ime 6

月份必须是整数b/w 0-11.

检查Date()构造函数docs [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
 ];

Run Code Online (Sandbox Code Playgroud)

此外,您可能希望更改图表的水平轴格式以显示更友好的日期

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

Run Code Online (Sandbox Code Playgroud)

这是一个例子:http://jsfiddle.net/jaimem/F4Gzr/1/

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

归档时间：	13 年，1 月前
查看次数：	5370 次
最近记录：	10 年，6 月前