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

Question

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

提前谢谢

Answer 1

当图表的

'ready'

事件触发时，可以修改图表元素

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

a

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>

Answer 2

太棒了。这对我也有用。谢谢