如何为Google Column Chart的图表区域设置圆角？

Google Column Chart本身没有提供直接设置柱状图圆角的配置项，你可以通过操作图表生成的SVG元素来实现这个效果，具体步骤如下：

1. 等待图表绘制完成再修改DOM #

必须在图表的ready事件中执行修改操作，确保柱状图对应的SVG元素已经生成：

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

function drawChart() {
  // 示例数据，替换成你的实际数据
  var data = google.visualization.arrayToDataTable([
    ['分类', '数值'],
    ['项1', 45],
    ['项2', 60],
    ['项3', 35]
  ]);

  var options = {
    colors: ['#ffb366'], // 你的浅橙色配置
    // 其他现有配置项保留
  };

  var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
  
  // 监听ready事件，图表渲染完成后执行圆角修改
  google.visualization.events.addListener(chart, 'ready', function() {
    addRoundedCornersToColumns();
  });

  chart.draw(data, options);
}

2. 编写SVG元素修改函数 #

通过选择柱状图对应的矩形元素，修改rx和ry属性实现圆角：

function addRoundedCornersToColumns() {
  // 选择浅橙色的柱状图矩形，可根据实际SVG结构调整选择器
  var orangeColumns = document.querySelectorAll('#chart_div svg rect[fill="#ffb366"]');
  
  orangeColumns.forEach(function(columnRect) {
    // 设置圆角半径，数值可根据需求调整
    columnRect.setAttribute('rx', '8');
    columnRect.setAttribute('ry', '8');
  });
}

注意事项 #

• 不同版本的Google Charts生成的SVG结构可能略有差异，如果选择器找不到元素，打开浏览器开发者工具，查看柱状图矩形元素的具体位置或属性，调整选择器即可。
• 如果存在多系列柱状图，可通过fill属性精准筛选你需要设置圆角的浅橙色柱形。

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