javascript - Google 折线图 - 显示为 2K 的年份-6ren

javascript - Google 折线图 - 显示为 2K 的年份

转载作者：行者123 更新时间：2023-11-27 23:23:32

25

4

我正在尝试使用谷歌折线图，一切都很好，除了 x 轴上的所有年份都显示为 2K 而不是例如。 2015、2016。这是我的测试页:http://bokhald.trubador.is/bokhald/testGraf.html

这是我的代码:

<html>
<head>

<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
    google.charts.load('current', {'packages':['line']});
    google.charts.setOnLoadCallback(drawChart);

    function drawChart() {

                  var data = new google.visualization.DataTable();
                  data.addColumn('number', 'Year');
                  data.addColumn('number', 'Altogether');
                  data.addColumn('number', 'Product 1');
                  data.addColumn('number', 'Product 2');

                  data.addRows([

                            [2009, 21, 13, 8], [2010, 32, 17, 15], 
                            [2011, 48, 38, 10], [2012, 53, 34, 19], 
                            [2013, 59, 44, 15], [2014, 56, 46, 10],
                            [2015, 56, 48, 8], [2016, 6, 5, 1]

                  ]);

                  var options = {
                    height: 500,
                    axes: {
                    }
                  };

                  var chart = new google.charts.Line(document.getElementById('my_chart'));

                  chart.draw(data, options);
                }
                    $(window).resize(function(){
                    drawChart();
                    });
              </script>
</head>
<body>
  <div id="my_chart"></div>
</body>
</html>

最佳答案

将 addColum 中的日期更改为 date 并将日期设置为新的 javascript 日期对象，将 x 冒号的格式设置为 yyyy

google.charts.load('current', {'packages':['line']});
    google.charts.setOnLoadCallback(drawChart);

    function drawChart() {

                  var data = new google.visualization.DataTable();
                  data.addColumn('date', 'Year');
                  data.addColumn('number', 'Altogether');
                  data.addColumn('number', 'Product 1');
                  data.addColumn('number', 'Product 2');

        data.addRows([
         [new Date(2009,1,1), 21, 13, 8], [new Date(2010,1,1), 32, 17, 15], 
                        [new Date(2011,1,1), 48, 38, 10], [new Date(2012,1,1), 53, 34, 19], 
                        [new Date(2013,1,1), 59, 44, 15], [new Date(2014,1,1), 56, 46, 10],
                        [new Date(2015,1,1), 56, 48, 8], [new Date(2016,1,1), 6, 5, 1]
        ]);

                  var options = {
                    width: 1000,
                    height:500,
                    hAxis: {
            format: 'yyyy',
            gridlines: {count: 15}
          },
                    axes: {
                    }
                  };

                  var chart = new google.charts.Line(document.getElementById('my_chart'));

                  chart.draw(data, options);
                }
                    $(window).resize(function(){
                    drawChart();
                    });

https://developers.google.com/chart/interactive/docs/datesandtimes

https://jsfiddle.net/rzqa598j/2/

关于javascript - Google 折线图 - 显示为 2K 的年份，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/35176261/

25

4

0

文章推荐： c++ - TinyXML 抛出访问冲突

文章推荐： html - 左侧菜单板 - 使一侧部分模糊和透明

文章推荐： html - ionic - 输入框宽度

SQL 查询以显示高尔夫球手何时未附加到事件/年份
我正在完成一项让我难堪好几天的学校作业。任务是使用 View (VAvailableGolfers) 将与从组合框中选择的给定事件/年份无关的高尔夫球手填充到列表框中。以下是表中的数据: 那么，表单上
javascript - 日期基于年份+年份
给定一年和那年的某一天，我如何获得完整的日期？例如:60/2014 = 2014 年 3 月 1 日和 61/2016 = 2016 年 3 月 1 日注释:-年和日可以作为单独的参数传递。 -结
ExtJS 无法在日期选择器中选择月份/年份
我正在使用 ExtJS 3，当我想为日期选择器选择日期时，我只能设置日期和月份(通过左/右箭头)。月/年面板会放下来，但很快就会消失，因此无法选择它。这是最能描述该行为的桌面记录:http://fli
javascript - 如何使用div在javascript中显示当前月份，年份
我正在尝试获取用于在 div 中显示当前月份和年份的 jquery 或 java 脚本代码，但目前还不能。我的意思是我想以这种格式显示当前的月份和年份:October 2012 这样每个月我都不需要编
php - 从php中的日期检索日期，月份，年份
我有这段代码可以从数据库中获取一个字段: $end_date=$row1['end_date']; 如果我打印它，它会给我这样的信息:25-09-2012我需要的是获取月份值、年份和日期。类似于: $
r - inner_join() 其中一个键的值范围(年份)
我有两个格式如下的数据集: df1 #> Artist Album Year #> 1 Beatles Sgt. Pepper's 1967 #>
javascript - 如何防止日期时间验证中的 future 年份？
我使用 jQuery 验证插件和 maskedInput 插件对输入进行了自定义日期和时间验证。有没有办法在自定义验证中进行验证以防止输入大于当前年份的年份？我的代码: $("#date").ma
java - 从互联网解析 xml(年份)
我在 xml 解析方面没有经验，所以也许我写的一些东西对某些人来说看起来很愚蠢，也许我的一些术语不太正确。请原谅。我开发了一个Android应用程序，它需要解析来自YR.no的天气数据。。该组织提
scala - 如何在scala中获取当前日期，月份，年份
我需要当前年份，月份和日期为3个不同的变量。下面的代码给出了日期时间 val now = Calendar.getInstance().getTime() 2016年9月29日星期四18:27:38
JQuery UI - 无法更改模态对话框中日期选择器中的月份/年份
在模态对话框中使用日期选择器，请不要在 Firefox 19.0.2 中使用更改月/年下拉列表，请参阅: http://jsfiddle.net/469zV/2/ HTML
javascript - 如何验证输入日期 html 年份？
我希望日期输入在年份有 4 位数字后停止输入。我尝试使用 HTML 中的 min 和 max 组件，但它仍然允许您键入删除第一个数字。参见示例 1。请参阅示例 2 以了解可以输入超过 4 位数字的年
c# - 我如何从通用日期列表中选择不同的(按唯一的月份/年份)？
因此不同是基于唯一的月/年，而不仅仅是一个不同的月份(所以我希望 2011 年 1 月和 2012 年 1 月是不同的) // Test set of data List Compl
C# - 包装日期、月份、年份
在 Programming in the Key of C# 中，作者给出了一个示例(附源代码)，说明如何将日期(年、月、日 -- 数字)打包为 32 位整数。在示例中，作者将信息打包如下: int
javascript - 如何在下拉列表中绑定(bind)年份
这里我有一个任务，如果我写这样的代码，年份应该像 1947 年到 2016 年一样绑定(bind)在 DropdownList 中 1947 2016 拍了一整天最佳答案例如，
MySQL 查询 - 最近的月份/年份
显然，我的 SQL 不是最好的，但我想做的是通过查找条目中的最大年份和月份来获取数据库中的最新日期。现在我有: select max(Month), max(Year) from posts wher
python - 在分组变量中按先前值(年份)标记滚动重复项
我试图弄清楚是否有任何 ID 发生在任何早年(即 dfo 中的 Duplicate 列)。如果是这样，我想将该行标记为重复行并包括 ID 首次出现的年份(即 Year_Duplicate)。我确实有
python - 根据第一个字符对列列表(年份)进行切片
我已经从 df 中提取了列列表，这些列是字符串类型，如下所示:1999-1(如 1999 年第一个月)。我想删除 2000 年之前的所有列，因此我提取了列列表并使用列表理解来检查字符串的第一个字符是
c# - DateTimePicker 日历默认为上次选择的月份/年份
日期时间是什么时候？我的 DateTimePicker 控件的源更改为 null，我想选择另一个日期，日历下拉列表默认为最后选择的月份和年份。我正在为 DOB 使用 DateTimePicker，因
java - 从检索到的日期中提取日期-月份-年份
我正在获取系统当前日期并尝试在 TextView 中显示它。尝试下面的代码后 private OnClickListener listener1 = new OnClickListener() {
javascript - 如何使用knockout JS 验证日期(年份)？
我想使用 knockoutJS 库验证年份。我面临的问题是，当用户输入错误的年份时，不会对年份进行验证。以下是年份错误的情况。 (01/01/12 becomes 01/01/0012) (01/0

首页

博学

6Ren·AI

商城

javascript - Google 折线图 - 显示为 2K 的年份