如何使谷歌日歷圖表移動響應？

Question

我正在嘗試 plot 谷歌日歷圖表中的前 50 天。 但是當涉及到像移動設備這樣的小屏幕時，有些月份就被砍掉了。

我也無法減小單元格寬度。 它將影響更大屏幕上的視圖。

這是我的 html。

<div id="calendar_basic" style = "width: 100%;"></div>

這是我的 Java 腳本。

<script type="text/javascript">
      google.charts.load("current", {packages:["calendar"]});
      google.charts.setOnLoadCallback(drawChart);
      $(window).resize(drawChart);
   function drawChart() {
       var dataTable = new google.visualization.DataTable();
       dataTable.addColumn({ type: 'date', id: 'Date' });
       dataTable.addColumn({ type: 'number', id: 'Won/Loss' });
       dataTable.addRows([
          {% for n in cal_group %}
       [new Date({{n[0].strftime('%Y,%m,%d') }}),{{n[1]}}],

          {% endfor %}

        ]);

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

       var options = {
         title: "Calendar Days and Count",
         height: 500,
         calendar: {
         yearLabel: {
        fontName: 'Times-Roman',
        fontSize: 32,
        color: '#1A8763',
        bold: true,
        italic: true
      },
      monthLabel: {
        fontName: 'Times-Roman',
        fontSize: 12,
        color: '#1A8763',
        bold: true,
        italic: true
      },
      monthOutlineColor: {
        stroke: '#1A8763',
        strokeOpacity: 0.8,
        strokeWidth: 1
      },
      unusedMonthOutlineColor: {
        stroke: '#9FE582',
        strokeOpacity: 0.8,
        strokeWidth: 1
      },
      underMonthSpace: 16,
    },
    colorAxis: {
        minValue: 0,
        colors: ['#99E37C','#40921F']
    },
    cellColor: {
        stroke: '#76a7fa',
        strokeOpacity: 0.5,
        strokeWidth: 1,
      },
      **width: $('#calendar_basic').width(),**
      forceIFrame: true,
       };

       chart.draw(dataTable, options);
   }
    </script>

我嘗試提供 100% 的內聯樣式元素寬度。 它適用於所有其他谷歌圖表，如條形圖、柱形圖、餅圖，但不適用於這個日歷圖表。 我猜默認單元格大小為 16 是罪魁禍首。 但是是否有任何選項可以使其響應。

Answer 1

我設法拼湊出某種解決方案，使日歷圖表可以從桌面使用到移動設備。

我的解決方案根據屏幕大小調整圖表單元格大小。 單元格大小設置為至少 12 像素，之后圖表變得難以使用 - 大約是平板電腦的寬度（屏幕大小 768 像素）。 對於手機，我實現了一個滾動 div。

HTML 元素寬度小於 690px 時滾動的元素：

      <div style="overflow-x:scroll;overflow-y:hidden;max-width:100%;">
        <div id="chart_element" style="width:100%;min-width:690px;"></div>
      </div>

單元格大小的計算：

       var chartElement = document.getElementById('chart_element');
       var cellSize = Math.max(12,((chartElement.offsetWidth*0.9)/52));

上面的代碼獲取包含圖表的 div，計算寬度並將其除以一年中的周數 (52)，以計算當天的單元格應該有多大。 寬度減小到 90% 以留出邊距。 如果像元大小小於 12，則使用 12。

計算圖表的高度有點棘手。 盡管我們可以使用計算出的像元大小來很好地估計高度 - 如果我們固定顯示的年數，邊距和標題會使 go 有點不穩定。

       var years = 2;
       var chartHeight = (cellSize*7*years) + (4*years*cellSize);

上面的代碼使用單元格大小乘以 7（行）然后乘以顯示的年數來計算年份的高度。 然后它使用單元格大小為標題等添加一些邊距/填充，因為它在年份之間大約有 3 個單元格塊，而在上面大約有一個單元格塊。

我想在渲染后獲取 SVG 的實際高度，然后將圖表 div 強制到該高度，但ready事件在圖表渲染之前返回。

解決方案的最后一部分是如果 window 大小發生變化，則重新繪制圖表。 您可以使用以下代碼執行此操作：

   window.addEventListener("resize", function() {
     drawChart();
   });

最后，我決定刪除所有指定字體大小的設置，因為我發現圖表本身管理得更好。

完整代碼：

  <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
  <script type="text/javascript">
      google.charts.load("current", {packages:["calendar"]});
      google.charts.setOnLoadCallback(drawChart);

   function drawChart() {
       var dataTable = new google.visualization.DataTable();
       dataTable.addColumn({ type: 'date', id: 'Date' });
       dataTable.addColumn({ type: 'number', id: 'Feedback' });
       dataTable.addRows([
         [ new Date(2022, 1, 1), 0],
         [ new Date(2021, 1, 1), 0],
        // other dates ommitted for brevity
        ]);

       var chartElement = document.getElementById('chart_element');
       var chart = new google.visualization.Calendar(chartElement);
       var years = 2;
       var cellSize = Math.max(12,((chartElement.offsetWidth*0.9) / 52));
       var chartHeight = (cellSize*7*years) + (4*years*cellSize);

       var options = {
         title: "",
         height: chartHeight,
         calendar: {
          cellSize: cellSize,
          monthLabel: {
            fontName: 'Montserrat',
            color: '#4D4D4D',
            bold: false
          },
          monthOutlineColor: {
            stroke: '#4D4D4D',
            strokeOpacity: 1,
            strokeWidth: 1
          },
          unusedMonthOutlineColor: {
            stroke: '#CCCCCC',
            strokeOpacity: 0.8,
            strokeWidth: 1
          },
          yearLabel: {
            fontName: 'Montserrat',
            color: '#CCCCCC',
            bold: false,
            italic: false
          },
          focusedCellColor: {
            stroke: '#4D4D4D',
            strokeOpacity: 1,
            strokeWidth: 1
          }
         },
        noDataPattern: {
          backgroundColor: '#FFFFFF',
          color: '#F7EAD8'
        },
        colorAxis: {colors:['#aadbd3','#52817a']}
       };

       chart.draw(dataTable, options);

       google.visualization.events.addListener(chart, 'ready', new function() {
        // this is called before the chart is rendered unfortunately
       });
   }

   window.addEventListener("resize", function() {
     // this ensures that the chart gets redrawn when the screen is resized
     drawChart();
   });
  </script>