Google Chart技术求助：无法移除图例、调整高度及布局优化

问题根源分析 #

你的代码存在两个核心问题导致图例无法移除、高度设置不生效：

• google.charts.Bar.convertOptions 调用错误，错误传入了data参数，正确用法仅需传入options
• 混淆了Classic图表（google.visualization.ColumnChart）与Material图表的选项转换逻辑，导致部分配置未正常生效

此外，固定宽度370px会和col-md-4容器的响应式布局冲突，需要调整适配。

修复与实现步骤 #

1. 修正选项转换逻辑：移除convertOptions中的data参数，确保配置正确传递
2. 彻底移除图例：保持legend: 'none'配置，或使用Classic图表标准写法legend: { position: 'none' }
3. 适配响应式容器：将width设为'100%'，让图表自适应col-md-4容器宽度
4. 调整柱状图间距：通过bar.groupWidth控制柱子宽度（比如设为'70%'），柱子间会自动留出间距
5. 保留自定义颜色：你已通过style角色设置不同柱子颜色，该部分无需修改

修正后的完整代码 #

function drawBarChart() {
  var data = google.visualization.arrayToDataTable([
    ["Retention", "Level", { role: "style" }],
    ["HIGH", 12, "#E54B4B"],
    ["ELEVATED", 29, "#FFB100"],
    ["LOW", 52, "#2BC18D"]
  ]);

  var options = {
    title: "Retention Level",
    height: 600,
    width: '100%', // 自适应容器宽度
    legend: 'none', // 移除图例
    bar: {
      groupWidth: "70%" // 调整柱子宽度，留出间距
    },
    ticks: [0, 20, 40, 60, 80, 100],
  };

  // 使用Classic ColumnChart，直接传入options即可
  var chart = new google.visualization.ColumnChart(document.getElementById('chart_divTwo'));
  // 若需Material风格图表，替换为以下两行：
  // var chart = new google.charts.Bar(document.getElementById('chart_divTwo'));
  // chart.draw(data, google.charts.Bar.convertOptions(options));
  chart.draw(data, options);
}

额外说明 #

• 若需要Material风格的柱状图，需将图表实例改为google.charts.Bar，并使用google.charts.Bar.convertOptions(options)转换配置
• col-md-4容器需确保没有额外的padding或margin影响图表显示，可通过自定义CSS调整容器样式

内容的提问来源于stack exchange，提问作者prantak singh