Google Charts图例间距异常：图例紧凑重叠问题求助

嘿，我来帮你搞定这个图例重叠的问题！看了你的配置，最可能的原因是chartArea.width: '100%'把图表区域拉满了整个容器，图例直接被挤到边缘甚至叠在一起了，给你几个实用的调整方案：

方案1：给图表区域“瘦身”，给图例留空间 #

修改chartArea的宽度，同时明确右侧预留区域，让图例有足够的展示空间：

var options = {
  fontName: 'Roboto',
  height: 400,
  fontSize: 12,
  chartArea: {
    left: '8%',
    width: '85%', // 减少宽度，给图例腾位置
    height: 350,
    right: '12%' // 明确右侧预留的空间大小
  },
  isStacked: true,
  tooltip: {
    textStyle: { fontName: 'Roboto', fontSize: 12 }
  },
  vAxis: {
    title: '',
    titleTextStyle: { fontSize: 12, italic: false },
    gridlines:{ color: '#f5f5f5', count: 10 },
    minValue: 0
  },
  // 新增图例优化配置
  legend: {
    position: 'right', // 固定图例位置，可选top/bottom/left
    textStyle: { fontSize: 12 },
    maxLines: 3, // 允许图例自动换行，最多3行，避免横向重叠
    alignment: 'center'
  }
};

方案2：调整图例布局方式 #

如果不想动图表区域，也可以直接调整图例的位置和换行规则：

• 把图例移到顶部或底部，横向排列会更宽松：legend.position: 'top'
• 强制图例换行：legend.maxLines: 2（根据实际情况设置行数）
• 要是布局允许，稍微缩小图例文字：legend.textStyle.fontSize: 11（不过你用的12号已经很合适，这个可选）

方案3：检查容器宽度 #

如果你的图表所在的HTML容器本身太窄，也会挤得图例重叠，可以给容器设置一个最小宽度：

.chart-container {
  min-width: 600px;
}

你可以把这些方案组合起来试，先调整chartArea的宽度，再配合图例的换行设置，基本就能解决问题啦！

内容的提问来源于stack exchange，提问作者FULL STACK DEV