javascript - 更改 Google 可视化时间轴中列描边的颜色

Question

我正在尝试更改 Google 可视化时间线中各列的描边颜色。

我可以做到这一点，但我无法指定仅应更改垂直笔划线而不是水平线。

有没有办法只识别垂直线？ 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>