2

因此，我正在尝试使用 Google 的 Chart API 在折线图上绘制潮汐时间。但是，图表上绘制的点与正确的日期和时间值不对应。

数据采用日期时间（x 轴）和潮汐高度（y 轴）的形式。我不确定我是否正确创建了日期时间值，或者 API 只是在做一些奇怪的事情。

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

如果有人能告诉我我做错了什么，将不胜感激。 在 google chart 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

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

检查 Date() 构造函数文档 [0]

month 表示月份的整数值，从 0 开始表示 1 月到 11 表示 12 月。

只需相应地更改您的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 回答
-2 
<div id="tide_chart_week" stye="float:left; height:800px; background:blue;"></div>

注意使用 stye 而不是 style ！

于 2015-05-26T03:08:54.837 回答