Google 调整图表大小 Window 调整大小

Question

如何让我的 google 图表正确调整大小，目前当我展开 window 时它会变大，但当我缩小 window 时它不会缩小。本质上，我已经将整个 google 图表包裹在一个调整大小的函数中，但它不太正确：

function resize() {
  google.charts.load('current', {'packages':['timeline']});
  google.charts.setOnLoadCallback(drawChart);

  function drawChart() {
    var container = document.getElementById('timeline');
    var chart = new google.visualization.Timeline(container);
    var dataTable = new google.visualization.DataTable();

    dataTable.addColumn({ type: 'string', id: 'Type' });
    dataTable.addColumn({ type: 'string', id: 'Organisation' });
    dataTable.addColumn({ type: 'date', id: 'Start' });
    dataTable.addColumn({ type: 'date', id: 'End' });
    dataTable.addRows([
      [ 'Work Experience', 'GE', new Date(2010, 8, 1 ), new Date(2011, 8, 30) ],
      [ 'Work Experience', 'Shell', new Date(2015, 2, 1),  new Date(2016, 1, 1) ],
      [ 'Work Experience', 'British Gas', new Date(2016, 1, 1),  new Date(2017, 9, 1) ],
      [ 'Work Experience', 'British Telecom', new Date(2017, 9, 1),  new Date() ],
      [ 'Work Experience', 'University', new Date(2011, 8, 30),  new Date(2015, 2,1) ]
      ]);
  
    var options = {
                  timeline: {showRowLabels: false},
                  backgroundColor: '#161616',
                  barLabelStyle: { fontName: 'Roboto', color: '#ffffff' },
                  height: 100, 
                  hAxis: {textStyle:{color: '#ffffff'}}
                  };
  
  google.visualization.events.addListener(chart, 'ready', function () {
  var labels = container.getElementsByTagName('text');
  Array.prototype.forEach.call(labels, function(label) {
      if (label.getAttribute('text-anchor') === 'middle') {
      label.setAttribute('fill', '#ffffff');
  }
  });
  });

  google.visualization.events.addListener(chart, 'ready', function () {
  var rects = container.getElementsByTagName('rect');
  Array.prototype.forEach.call(rects, function(rect) {
    // find chart <rect> element
    if ((rect.getAttribute('x') === '0') && (rect.getAttribute('y') === '0')) {
      // remove stroke from last <rect> element
      rect.setAttribute('stroke', 'none');
      rect.setAttribute('stroke-width', '0');
      }
    });
  });

  chart.draw(dataTable, options);
  }

}

window.onload = resize;
window.onresize = resize;

Answer 1

调整大小时，需要先清除图表，再重新绘制。
如果不清除图表，可以防止图表容器收缩。
然后重新绘制时，它是相同的大小。
（这完全取决于页面布局，但清除将解决大部分问题）

使用方法 --> chart.clearChart()

此外，加载回调只需在每次页面加载时调用一次。
无需在调整大小事件处理程序中包含加载语句。

并且，google的加载语句默认会等待页面加载。
并且可以用来代替 --> window.onload

请参阅以下工作片段...

google.charts.load('current', {
  packages: ['timeline']
}).then(function () {
  var container = document.getElementById('timeline');
  var chart = new google.visualization.Timeline(container);
  var dataTable = new google.visualization.DataTable();

  dataTable.addColumn({ type: 'string', id: 'Type' });
  dataTable.addColumn({ type: 'string', id: 'Organisation' });
  dataTable.addColumn({ type: 'date', id: 'Start' });
  dataTable.addColumn({ type: 'date', id: 'End' });
  dataTable.addRows([
    ['Work Experience', 'GE', new Date(2010, 8, 1 ), new Date(2011, 8, 30)],
    ['Work Experience', 'Shell', new Date(2015, 2, 1),  new Date(2016, 1, 1)],
    ['Work Experience', 'British Gas', new Date(2016, 1, 1),  new Date(2017, 9, 1)],
    ['Work Experience', 'British Telecom', new Date(2017, 9, 1),  new Date()],
    ['Work Experience', 'University', new Date(2011, 8, 30),  new Date(2015, 2,1)]
  ]);

  var options = {
    timeline: {showRowLabels: false},
    backgroundColor: '#161616',
    barLabelStyle: {fontName: 'Roboto', color: '#ffffff'},
    height: 100,
    hAxis: {textStyle:{color: '#ffffff'}}
  };

  google.visualization.events.addListener(chart, 'ready', function () {
    var labels = container.getElementsByTagName('text');
    Array.prototype.forEach.call(labels, function(label) {
      if (label.getAttribute('text-anchor') === 'middle') {
        label.setAttribute('fill', '#ffffff');
      }
    });

    var rects = container.getElementsByTagName('rect');
    Array.prototype.forEach.call(rects, function(rect) {
      // find chart <rect> element
      if ((rect.getAttribute('x') === '0') && (rect.getAttribute('y') === '0')) {
        // remove stroke from last <rect> element
        rect.setAttribute('stroke', 'none');
        rect.setAttribute('stroke-width', '0');
      }
    });
  });

  window.addEventListener('resize', drawChart);
  drawChart();

  function drawChart() {
    chart.clearChart();
    chart.draw(dataTable, options);
  }
});

<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="timeline"></div>

Google 调整图表大小 Window 调整大小

Google Chart Resize on Window Resize

javascript

charts

google-visualization