Использование только лет (без месяцев или дней) с графиками временной шкалы Google - PullRequest
Новая
       30

Использование только лет (без месяцев или дней) с графиками временной шкалы Google

2 голосов
/ 21 мая 2019

Я хочу показать временную шкалу (с Google Charts) только с годами.

Однако примеры на веб-странице временных диаграмм Google всегда включают годы, месяцы и дней (например, new Date(1789, 3, 30)).

Я пытался уменьшить new Date() до одного года (например, new Date(2019)), но Google Charts интерпретирует его как секунды (2.019 seconds). 

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>

<script type="text/javascript">
  google.charts.load("current", {packages:["timeline"]});
  google.charts.setOnLoadCallback(drawChart);
  function drawChart() {
    var container = document.getElementById('div_timeline');
    var chart = new google.visualization.Timeline(container);
    var dataTable = new google.visualization.DataTable();

    dataTable.addColumn({ type: 'string', id: 'Nr' });
    dataTable.addColumn({ type: 'string', id: 'Journal' });
    dataTable.addColumn({ type: 'date', id: 'Founded' });
    dataTable.addColumn({ type: 'date', id: 'Now' });

    dataTable.addRows([
      [ '1', 'Journal of Leisure Research', new Date(1969), new Date(2019) ],
      [ '2', 'Critical Sociology',        new Date(2009),  new Date(2019) ],
      [ '3', 'Geographical Analysis',  new Date(1909),  new Date(2019) ]
                      ]);

    chart.draw(dataTable,options);

  }
</script>

С этим кодом Journal of Leisure Research теперь составляет от 1,996 до 2,019 секунды.

Вместо этого я хочу, чтобы график назначил 1969–2019 годы.

Как я могу это сделать? Спасибо за вашу помощь!

1 Ответ

0 голосов
/ 28 мая 2019

Просто установите дату на 1 января: 

 <html>
  <head>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
      google.charts.load('current', {'packages':['timeline']});
      google.charts.setOnLoadCallback(drawChart);
      function drawChart() {
        var container = document.getElementById('timeline');
        var chart = new google.visualization.Timeline(container);
        var dataTable = new google.visualization.DataTable();

         dataTable.addColumn({ type: 'string', id: 'Nr' });
    dataTable.addColumn({ type: 'string', id: 'Journal' });
    dataTable.addColumn({ type: 'date', id: 'Founded' });
    dataTable.addColumn({ type: 'date', id: 'Now' });

         dataTable.addRows([
      [ '1', 'Journal of Leisure Research', new Date(1969,1,0), new Date(2019,1,0) ],
      [ '2', 'Critical Sociology',        new Date(2009,1,0),  new Date(2019,1,0) ],
      [ '3', 'Geographical Analysis',  new Date(1909,1,0),  new Date(2019,1,0) ]]);
        chart.draw(dataTable);
      }
    </script>
  </head>
  <body>
    <div id="timeline" style="height: 180px;"></div>
  </body>
</html>
...