Foundation 6环境下Google Chart宽度过窄问题求助

我之前帮不少人解决过Foundation和Google Charts兼容的问题，你遇到的这个宽度不一致的情况很常见，主要是因为Google Charts的默认宽度设置和Foundation网格的自适应逻辑没匹配上，给你几个靠谱的解决办法：

1. 给Google图表设置自适应宽度 #

Google Charts默认可能会用固定宽度（比如600px），你只需要在图表配置的options里明确设置width: '100%'，让图表完全继承父容器（也就是你的large-12单元格）的宽度：

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

function drawChart() {
  // 你的数据定义
  var data = google.visualization.arrayToDataTable([
    ['Category', 'Value'],
    ['A', 10],
    ['B', 20],
    ['C', 15]
  ]);

  // 关键：设置width为100%
  var options = {
    title: '图表标题',
    width: '100%',
    height: 400
  };

  var chart = new google.visualization.ColumnChart(document.getElementById('your-chart-id'));
  chart.draw(data, options);
}

2. 强制图表容器继承单元格宽度 #

有时候即使设置了图表的width，可能还是会有样式冲突，这时候可以给图表容器加个CSS强制占满宽度：

#your-chart-id {
  width: 100% !important;
  max-width: 100%;
}

注意：把your-chart-id换成你实际的图表容器ID

3. 确保图表在Foundation初始化完成后渲染 #

Foundation的网格布局可能需要一点时间完成初始化，如果图表渲染得太早，容器的宽度还没被正确计算，就会导致图表宽度异常。你可以把图表的初始化逻辑放在Foundation的foundation-ready事件里：

// 先初始化Foundation
$(document).foundation();

// 等Foundation完全就绪后再加载图表
$(document).on('foundation-ready', function() {
  google.charts.load('current', {'packages':['corechart']});
  google.charts.setOnLoadCallback(drawChart);
});

按照这几步来，你的图表应该就能和顶部菜单宽度一致了，要是还有问题，可以检查下large-12单元格有没有被其他额外的CSS（比如自定义的max-width、padding）限制了宽度哦。

内容的提问来源于stack exchange，提问作者David Carrick Sutherland