谷歌折线图 - 显示为 2K 的年份

Google Line Chart - Year displaying as 2K

本文关键字：2K 折线图 显示 谷歌      更新时间：2023-09-26

我正在尝试使用谷歌折线图，除了 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 中的日期更改为日期，并使日期成为新的 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/

相关文章：