在Google Visualization時間軸中更改列筆觸的顏色

Question

我正在嘗試更改Google Visualization時間軸中列的筆觸顏色。

我能夠做到這一點，但我不能指定僅更改垂直描邊線而不更改水平線。

有沒有辦法只識別垂直線？ svg稱水平線和垂直“路徑d”。

 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(setcolumnstroke); google.visualization.events.addListener(chart, 'ready', function () { setcolumnstroke(); observer.observe(container, { childList: true, subtree: true }); }); function setcolumnstroke() { Array.prototype.forEach.call(container.getElementsByTagName('path'), function (path) { path.setAttribute('stroke', '#000000'); }); } chart.draw(dataTable); } 

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

Answer 1

這是一種方法：如果d屬性（M之后的第一個數字和L之后的第一個數字）相同，則取X坐標，這是一條垂直線。

正則表達式答案

使用正則表達式將M之后的第一個數字與L之后的數字進行匹配： M(\\d+).*L\\1

 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(setcolumnstroke); google.visualization.events.addListener(chart, 'ready', function () { setcolumnstroke(); observer.observe(container, { childList: true, subtree: true }); }); function setcolumnstroke() { Array.prototype.forEach.call(container.getElementsByTagName('path'), function (path) { // Check for vertical lines if ( path.getAttribute('d').match(/M(\\d+).*L\\1/) ) { path.setAttribute('stroke', '#FF0000'); } else { path.setAttribute('stroke', '#000000'); } }); } chart.draw(dataTable); } 

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

舊答案：

使用子字符串方法： if (d.substring(1, 4) == d.substring(d.indexOf('L')+1, d.indexOf('L')+4))

 // The X coordinate of the M (move) command
d.substring(1, 4)

// The X coordinate of the L (line) command
d.substring(d.indexOf('L')+1, d.indexOf('L')+4))

請注意，如果它的格式不完全符合M ... L ...，則可能會中斷，但Google圖表路徑輸出始終采用該格式。

 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(setcolumnstroke); google.visualization.events.addListener(chart, 'ready', function () { setcolumnstroke(); observer.observe(container, { childList: true, subtree: true }); }); function setcolumnstroke() { Array.prototype.forEach.call(container.getElementsByTagName('path'), function (path) { let d = path.getAttribute('d'); let dl = d.indexOf('L'); if ( d.substring(1, d.indexOf(',')) == d.substring(dl+1, d.indexOf(',', dl)) ) { path.setAttribute('stroke', '#FF0000'); } else { path.setAttribute('stroke', '#000000'); } }); } chart.draw(dataTable); } 

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