1

我正在尝试在谷歌日历图表中绘制前 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 是罪魁祸首。但是是否有任何选项可以使其响应。

4

0 回答 0