Google Chart Timeline：更改条形和颜色选择答案

【问题标题】：Google Chart Timeline: change bars shape and color selectionGoogle Chart Timeline：更改条形和颜色选择
【发布时间】：2017-01-25 14:59:33
【问题描述】：

编辑：这是更新后的代码，setFillStroke() 改变描边的颜色：

        var observer = new MutationObserver(setBorderRadius);
        var observer2 = new MutationObserver(setFillStroke);
        google.visualization.events.addListener(chart, 'ready', function () {
          setBorderRadius();
          setFillStroke();
          observer.observe(container, {
            childList: true,
            subtree: true
          });
          observer2.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', 10);
              rect.setAttribute('ry', 10);
            };
          });
        };

        function setFillStroke() {
            Array.prototype.forEach.call(container.getElementsByTagName('rect'), function (rect) {
                if (rect.getAttribute('stroke') == '#000000') {
                  rect.setAttribute('stroke', '#ffffff');
                };
              });
        };

使用相同的方法，我编写了一个代码，用于制作圆点具有相同开始和结束日期的元素（如 new Date(2013, 01,01), new Date(2013, 01,01)）：

function biggerPoints() {
            Array.prototype.forEach.call(container.getElementsByTagName('rect'), function (rect) {
                if (rect.getAttribute('width') == '3') {
                  rect.setAttribute('width', '20');
                  rect.setAttribute('height', '20');
                  rect.setAttribute('rx', 20);
                  rect.setAttribute('ry', 20);
                };
              });
            };

我想对Google Chart Timeline 创建的矩形的边缘进行圆角处理，并在选择元素时更改 stoke 属性颜色。由于我找不到任何选项，所以我尝试使用 jQuery，但它不起作用：

$('rect').attr('rx', '20');
$('rect').attr('ry', '20');
$('rect').attr('stoke', '#202020'); //just for test I'm trying to add the stroke attribute to all, but nothing appened

这可能吗？

【问题讨论】：

谢谢，我会尝试使用的！但是每次有人点击条形时它都会改变 stroke 属性，我认为当'ready'事件开始时我不能改变它。
我做到了，我用解决方案更新了我的代码。顺便说一句，您的建议对于找到解决方案至关重要，我想给您最好的答案（您必须将您的评论复制到下面）

标签： jquery charts google-visualization

【解决方案1】：

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

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

使用MutationObserver 重新应用自定义样式

请参阅以下工作 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>

【讨论】：