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属性中获取X坐标（M之后的第一位数字和L之后的第一位数字），这是一条垂直线。

正则表达式答案

使用正则表达式将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>

在Google Visualization时间轴中更改列笔触的颜色

1 个答案: