Skip to main content
 首页 » 编程设计

jquery之按年份 DESC 显示 google 图表日历

2026年10月29日36zhenyulu

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

在谷歌的例子中:https://developers.google.com/chart/interactive/docs/gallery/calendar即使我按该顺序放置数据,也没有选项可以执行此操作。

如何实现这一点?谢谢。

请您参考如下方法:

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

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

输出: