谷歌图表时间线元素边框半径

Question

我在弄清楚如何在谷歌图表时间轴中的元素上设置边框半径时遇到问题。我已经浏览了所有选项，但似乎没有一个选项。 我尝试手动设置它，但没有任何运气。 有没有人可以解决这个问题？

提前谢谢

Answer 1

图表的'ready'事件触发时可以修改图表元素

但是，图表将在任何交互中恢复为原始样式

MutationObserver 可用于了解图表何时被修改
为了重新应用自定义样式/边框半径

图表是使用 svg 绘制的，用于更改 rect 元素的边框半径，
设置属性'rx' 和'ry'

查看以下工作 sn-p...

google.charts.load('current', {
  callback: drawChart,
  packages: ['timeline']
});

function drawChart() {
  var container = document.getElementById('timeline');
  var chart = new google.visualization.Timeline(container);
  var dataTable = new google.visualization.DataTable();

  dataTable.addColumn({ type: 'string', id: 'President' });
  dataTable.addColumn({ type: 'date', id: 'Start' });
  dataTable.addColumn({ type: 'date', id: 'End' });
  dataTable.addRows([
    [ 'Washington', new Date(1789, 3, 30), new Date(1797, 2, 4) ],
    [ 'Adams',      new Date(1797, 2, 4),  new Date(1801, 2, 4) ],
    [ 'Jefferson',  new Date(1801, 2, 4),  new Date(1809, 2, 4) ]
  ]);

  var observer = new MutationObserver(setBorderRadius);
  google.visualization.events.addListener(chart, 'ready', function () {
    setBorderRadius();
    observer.observe(container, {
      childList: true,
      subtree: true
    });
  });

  function setBorderRadius() {
    Array.prototype.forEach.call(container.getElementsByTagName('rect'), function (rect) {
      if (parseFloat(rect.getAttribute('x')) > 0) {
        rect.setAttribute('rx', 20);
        rect.setAttribute('ry', 20);
      }
    });
  }

  chart.draw(dataTable);
}

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