Изменить цвет обводки столбца на временной шкале визуализации Google - PullRequest
Новая
       32

Изменить цвет обводки столбца на временной шкале визуализации Google

0 голосов
/ 26 июня 2019

Я пытаюсь изменить цвет обводки для столбцов на временной шкале визуализации 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>

1 Ответ

1 голос
/ 26 июня 2019

Вот один из способов: взять координату X из атрибута d (первая цифра после M и первая цифра после L), если они совпадают, это вертикальная линия.

Regex Answer

Использование регулярного выражения для сопоставления первых чисел после 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 Charts всегда находится в этом формате. 

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>
...