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

Question

我有以下方形条形图

我希望它用谷歌图表制作圆角酒吧,如下图

Answer 1

没有标准配置选项来更改列的形状

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

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

所以需要修改,随时触发一个事件
- > 'ready','select','onmouseover','onmouseout'

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

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

rect还包括具有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>