谷歌图时间轴：变更条形状和颜色的选择

  • Z时代
  • 2024-01-10
  • 分类：问答

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

随着我写了一个代码为make圆点同样的方法有开始和结束的日期相同的元素（如新的日期（2013年，01,01），新的日期（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创建的rect的边缘，并ch在选中某个元素时更改stoke属性颜色。 因为我无法找到任何选项来做到这一点我用jQuery tryed，但它不工作：

$('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

这甚至可能吗？

回答：

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

然而，图表将恢复到原有的风格上的任何交互

使用MutationObserver重新申请自定义样式

看以下工作片段...

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>

以上是 谷歌图时间轴：变更条形状和颜色的选择 的全部内容， 来源链接： utcz.com/qa/258001.html

回到顶部