如何使圆角酒吧谷歌图表

Question

我有以下同方棒

我想它，以与谷歌图表圆角酒吧，如下面的图

图

Answer 1

没有规范configuration options更改列

的形状，但你可以直接修改SVG当图表的'ready'事件触发

然而，图表将恢复到原来的形状，任何其他事件

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

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

，以确保我们有正确的rect元素，
定制colors提供给图
那么fill属性进行检查，看是否它与的'none'一个fill属性colors

rect元件存在也包括在内，
这将是用来突出显示colu的rect MN 'onmouseover'

以及与'#ffffff'一个stroke属性rect元件，
，其用于标记所选择的列

一个其它说明，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>