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

Question

  

我有以下带方形条的图表

  

我想用谷歌图表制作圆角酒吧，如下图

Answer 1

没有标准configuration options来更改列的形状

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

但是，在任何其他事件

上，图表将恢复原始形状

因此需要在事件被解雇时进行修改 - ＆GT; 'ready'，'select'，'onmouseover'，'onmouseout'

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

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

中

rect个fill属性'none'的元素也包括在内，
这将是用于突出显示列rect

的'onmouseover'

以及rect属性为stroke的{​​{1}}元素，
用于标记所选列

另外一点，svg似乎将任何'#ffffff'更改为小写，
所以在数组中使用小写colors

请参阅以下工作代码段...

＆＃13;

＆＃13;

colors

＆＃13;

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']
});

＆＃13;

＆＃13;

＆＃13;