个人中心
gpt4 book ai didi

javascript - Google Chart API 折线图上的错误日期

转载 作者：行者123 更新时间：2023-11-29 17:20:39 25 4
gpt4 key购买 nike

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

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

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

如果有人能告诉我我做错了什么，将不胜感激。 showing wrong data points on 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>

最佳答案

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

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

month Integer value representing the month, beginning with 0 for January to 11 for December.

只需相应地更改您的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'}
 };

Example

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

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

关于javascript - Google Chart API 折线图上的错误日期，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/13131332/

25 4 0
文章推荐： mysql - php mysql通用更新查询不更新数据库中的数据
文章推荐： php - 使用带计数的选择子查询进行mysql查询时出错
文章推荐： javascript - 为任何发现的事件动态添加边距
文章推荐： android - 如何为每种语言(Cordova 到 Android)起一个 APP 名称
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com