如何在谷歌图表中制作圆角条

Question

我有以下带方条的图表

我希望它用谷歌图表制作圆角条，如下图所示

Answer 1

没有标准的configuration options来改变柱子的形状

但是你可以在图表的'ready'事件触发时直接修改svg

但是，图表将在任何其他事件中恢复为原始形状

所以需要修改，任何时候触发事件
--> 'ready', 'select', 'onmouseover', 'onmouseout'

要更改rect 元素的边框半径，请使用属性rx 和ry

确保我们拥有正确的rect 元素，
自定义colors 提供给图表
然后检查fill属性，看它是否存在于colors中

还包括fill 属性为'none' 的rect 元素，
这将是用于突出显示列'onmouseover' 的rect

以及stroke 属性为'#ffffff' 的rect 元素，
用来标记选中的列

另一个注意事项，svg 似乎将任何 colors 更改为小写，
所以数组中使用了小写colors

请参阅以下工作 sn-p...

google.charts.load('current', {
  callback: function () {
    var data = google.visualization.arrayToDataTable([
      ['Month', '2015', '2016'],
      ['Jan', 10, 15],
      ['Feb', 12, 18],
      ['Mar', 14, 21],
      ['Apr', 16, 24]
    ]);

    var container = document.getElementById('chart_div');
    var chart = new google.visualization.ColumnChart(container);

    var colors = ['#cd6155', '#5499c7'];

    google.visualization.events.addListener(chart, 'ready', changeBorderRadius);
    google.visualization.events.addListener(chart, 'select', changeBorderRadius);
    google.visualization.events.addListener(chart, 'onmouseover', changeBorderRadius);
    google.visualization.events.addListener(chart, 'onmouseout', changeBorderRadius);

    function changeBorderRadius() {
      chartColumns = container.getElementsByTagName('rect');
      Array.prototype.forEach.call(chartColumns, function(column) {
        if ((colors.indexOf(column.getAttribute('fill')) > -1) ||
            (column.getAttribute('fill') === 'none') ||
            (column.getAttribute('stroke') === '#ffffff')) {
          column.setAttribute('rx', 20);
          column.setAttribute('ry', 20);
        }
      });
    }

    chart.draw(data, {
      colors: colors
    });
  },
  packages: ['corechart']
});

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