我想让上面的 google 日历 responsive.I 需要 window 调整大小

Question

google.load("visualization", "1.1", {packages:["calendar"]});
      google.setOnLoadCallback(drawChart);


  function drawChart() {
  var dataTable = new google.visualization.DataTable();
   dataTable.addColumn({ type: 'date', id: 'Date' });
   dataTable.addColumn({ type: 'number', id: 'Won/Loss' });
   dataTable.addRows([
      [ new Date(2012, 3, 13), 37032 ],
      [ new Date(2012, 3, 14), 38024 ],
      [ new Date(2012, 3, 15), 38024 ],
      [ new Date(2012, 3, 16), 38108 ],
      [ new Date(2012, 3, 17), 38229 ],
      // Many rows omitted for brevity.
      [ new Date(2013, 9, 4), 38177 ],
      [ new Date(2013, 9, 5), 38705 ],
      [ new Date(2013, 9, 12), 38210 ],
      [ new Date(2013, 9, 13), 38029 ],
      [ new Date(2013, 9, 19), 38823 ],
      [ new Date(2013, 9, 23), 38345 ],
      [ new Date(2013, 9, 24), 38436 ],
      [ new Date(2013, 9, 30), 38447 ]
    ]);



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

      var options = {
       title: "Red Sox Attendance",
       height: 350,

   };

   chart.draw(dataTable, options);

   }

Here 是此
我想让它响应。如果我更改 window 的大小，我的日历大小也应相应调整。
我想根据 window 查看整个日历。

Answer 1

You can change the size of the days ("cells") with the calendar.cellSize option

https://developers.google.com/chart/interactive/docs/gallery/calendar?hl=en#days

所以我通过将单元格大小缩放到 window 的宽度来调整图表大小，如下所示：

var options = {
    title: "Red Sox Attendance",
    calendar: {
        cellSize: scale(5, 20)
    }
};

在哪里

function scale(min, max) {
    var cellSize = window.innerWidth / 60;
    if (cellSize > max) return max;
    if (cellSize < min) return min;
    return cellSize;
}

然后我强制它在 window 调整大小时重新绘制图表，如下所示：

//create trigger to resizeEnd event     
$(window).resize(function () {
    if (this.resizeTO) clearTimeout(this.resizeTO);
    this.resizeTO = setTimeout(function () {
        $(this).trigger('resizeEnd');
    }, 10);
});

//redraw graph when window resize is completed  
$(window).on('resizeEnd', function () {
    drawChart();
});

JSFiddle

我想让上面的 google 日历 responsive.I 需要 window 调整大小

I want to make the above google calendar responsive.I need a window resize for it

calendar

resize

window

google-visualization