Question

编辑：这是更新的代码，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');
                };
              });
        };

使用相同的方法，我编写了一个代码，用于生成圆点，具有相同开始和结束日期的元素（如新日期（2013,01,01），新日期（2013,01,01））：< / p>

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

这甚至可能吗？

Answer 1

在'ready'事件触发

时修改图表元素

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

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

请参阅以下工作代码段...

＆＃13;

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);
}

＆＃13;

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

＆＃13;

Google图表时间轴：更改条形图和颜色选择

1 个答案: