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

Question

我在弄清楚如何在 google 图表时间轴中的元素上设置 border-radius 时遇到问题。我已经查看了所有选项，但似乎没有一个选项。 我试过手动设置它但没有任何运气。 有人能解决这个问题吗？

提前谢谢

Answer 1

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

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

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

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

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

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>