google图表时间表元素border-radius [英] google charts timelines element border-radius

问题描述

我有一个问题，弄清楚如何在google图表时间轴中的元素上设置border-radius。我看过所有的选择，但似乎没有一个。
我已经尝试手动设置它，但没有任何运气。

解决方案

/ div>

当图表的'ready'事件触发

该图表将在任何交互性上恢复为原始样式。

a MutationObserver 已被修改

以便重新应用自定义样式/边框半径

使用svg绘制图表，以更改边框半径a rect 元素，

设置属性'rx'和 ry'

查看以下工作片段...

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

I have a problem figuring out how to set the border-radius on elements in a google charts Timeline. I have looked through all the options but there doesn't seem to be one for that. I have tried manually setting it but without any luck. Does anyone have a solution to this problem?

thx in advance

解决方案

the chart elements can be modified when the chart's 'ready' event fires

however, the chart will revert back to the original style on any interactivity

a MutationObserver can be used to know when the chart has been modified
in order to re-apply the custom style / border radius

the chart is drawn using svg, to change the border radius on a rect element,
set attributes 'rx' and 'ry'

see the following working snippet...

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>

这篇关于google图表时间表元素border-radius的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！