按年份显示谷歌图表日历 DESC

Posted 2023-02-19

【中文标题】按年份显示谷歌图表日历 DESC

【英文标题】：Show google chart calendar by year DESC

【发布时间】：2015-09-01 08:06:23

【问题描述】：

我正在使用 Google 日历图表，我想先显示 2015 年的图表，然后再显示 2014 年、2013 年等。

在来自 google 的示例中：https://developers.google.com/chart/interactive/docs/gallery/calendar 没有选项可以执行此操作，即使我按该顺序放置数据。

如何做到这一点？谢谢。

【问题讨论】：

也许您可以绘制三个不同的图表，每个图表都有一个 DataView，将每个图表隔离到一年，然后以相反的顺序排列 3 个图表。

我试图避免这种情况。不过，谢谢你的回复，

【参考方案1】：

这并不是一个理想的解决方案，但如果您有兴趣，如果您愿意在数据中反转年份值，则可以手动反转图表中的年份值。像这样：

google.load("visualization", "1.1", 
  packages: ["calendar"]
);

google.setOnLoadCallback(drawChart);

function drawChart() 

  var dataTable = new google.visualization.DataTable();
  dataTable.addColumn(type: 'date');
  dataTable.addColumn(type: 'number');

  dataTable.addRows([
    [new Date(2012, 1, 1), 1],
    [new Date(2013, 1, 1), 2],
    [new Date(2014, 1, 1), 3],
    [new Date(2015, 1, 1), 4]
  ]);

  var chart = new google.visualization.Calendar(document.getElementById('calendar_basic'));
  var options = ;

  google.visualization.events.addListener(chart, 'ready', swapYears);
  chart.draw(dataTable, options);


// important code, this would be simpler w/ jQuery but here's pure JS
function swapYears() 
  var yearTexts = document.querySelectorAll('[font-size="50"]');

  var years = [];
  yearTexts.forEach(function(text) 
    years.push(text.innerhtml);
  );
  years.reverse();

  for (var i = 0; i < yearTexts.length; i++) 
    yearTexts[i].innerHTML = years[i];
  

JSFiddle

输出：

【讨论】：

这会交换年份标签，但所有内容都会保留。

是的，您还必须反转数据中的年份。

正如所指出的，这个解决方案根本不起作用，只会交换多年来的标签！

正如我清楚地说的，这是一个表面上的修复——你必须更新你的数据以匹配显示。这是我知道的解决此问题的唯一解决方法。