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

Question

I have following chart with square bars

I want it to make rounded corner bars with google charts like below pic

Answer 1

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

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

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

所以需要修改，任何时候触发事件
--> 'ready' , 'select' , 'onmouseover' , 'onmouseout'
更改 rect 的边框半径元素，使用属性 rx和 ry
确保我们有正确的 rect元素，
定制 colors提供给图表
然后是 fill检查属性，查看它是否存在于 colorsrect带有 fill 的元素'none' 的属性也包括在内，
这将是 rect用于突出显示列'onmouseover'
以及 rect带有 stroke 的元素'#ffffff' 的属性,
用于标记选定的列

另请注意，svg 似乎改变了任何 colors小写，
所以小写colors在数组中使用

请参阅以下工作片段...

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>